业务需要用SVG实现一个足球滚动的同时自身旋转。
刚开始使用了animateTransform：
<g >
<rect width="50" height="50" rx="15" ry="15" fill="#ff48" y="160" x="500"/>
<animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
</g>
发现旋转的原点不是元素中心，查找了很多资料，发现可以使用style来解决这个问题
<g style="transform-box:fill-box; transform-origin:center;">
<rect width="50" height="50" rx="15" ry="15" fill="#ff48" y="160" x="500"/>
<animateTransform attributeName="transform" type="rotate" form="0 " to="360" dur="3s" repeatCount="indefinite" />
</g>
