The business needs to implement a football scroll in SVG while rotating itself.

We started with 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>

Copy the code

Found that the origin of rotation is not the center of the element, searched a lot of information, found that style can be used to solve this problem

<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>
Copy the code

The resources

Understand SVG Transform coordinate transformations

Super powerful SVG SMIL Animation details

Use animate. CSS rotation for elements in SVG without rotating the solution around a central point