I have an SVG that looks like this,
<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
<g fill="none" stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4">
<circle cx="565" cy="565" r="565" stroke="none"/>
<circle cx="565" cy="565" r="564"/>
</g>
</svg>
I want to give the impression that the this circle is spinning clockwise I can not for the life of me figure it out, I have in the past done stroke animation where one stroke gets painted one after the other so the svg looks like it's being drawn, but I have never animated the rotation of an svg.
CodePudding user response:
Or with SMIL:
<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
<g fill="none"
stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4">
<circle cx="565" cy="565" r="565" stroke="none"/>
<circle cx="565" cy="565" r="564"/>
<animateTransform attributeName="transform"
type="rotate"
from="360 565 565"
to="0 565 565"
dur="4.1s"
repeatCount="indefinite"/>
</g>
</svg>
CodePudding user response:
You can try setting an animation
in which it starts at 360deg
and works to -360deg
to get the clockwise rotation. See the example below.
@keyframes rotation {
0%{ transform: rotate(360deg); }
100%{ transform: rotate(-360deg); }
}
svg {
animation: rotation 5s linear infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
<g fill="none" stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4">
<circle cx="565" cy="565" r="565" stroke="none"/>
<circle cx="565" cy="565" r="564"/>
</g>
</svg>