circularMotion
circularMotion
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="50" fill="yellow"/>
<path d="M50,100 A50 50 0 0 1 150 100">
<animateTransform attributeName="transform"
type="rotate"
from="360 100 100"
to="0 100 100"
dur="5s"
begin="0s"
repeatCount="indefinite"/>
</path>
<circle cx="100" cy="100" r="6" fill="red"/>
</svg>
circularMotion
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="50" fill="yellow"/>
<path d="M55,100 A45 45 0 0 1 145 100">
<animateTransform attributeName="transform"
type="rotate"
from="360 100 100"
to="0 100 100"
dur="5s"
begin="0s"
repeatCount="indefinite"/>
</path>
<circle cx="100" cy="100" r="6" fill="red"/>
</svg>