I'm trying to dynamically change the rotation speed of my circle, but can't find a solution for this. I want to spin it really fast in the beginning and change it to stand still in e.g. 4 seconds.
I've tried to change the speed with javascript, but this doesn't result in a fluid image.
function slowdown_rotation(){
var animation = document.getElementById("rad_rotate");
animation.setAttribute('dur', "3s");
}
setTimeout(slowdown_rotation, 1000);
<svg viewBox='0 0 200 200' style='width:400px;'>
<g transform="translate(100,100)" stroke="#000" stroke-width="2">
<path d="M0 0-70 70A99 99 0 0 1-70-70Z" fill="#f00"/>
<path d="M0 0-70-70A99 99 0 0 1 70-70Z" fill="#080"/>
<path d="M0 0 70-70A99 99 0 0 1 70 70Z" fill="#dd0"/>
<path d="M0 0 70 70A99 99 0 0 1-70 70Z" fill="#04e"/>
</g>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 0 0"
to="360 0 0"
dur="1s"
repeatCount="indefinite" id='rad_rotate' />
</svg>
Like this?
to
value to multiples of 360. For compatibility with all browsers, you should use attributes values
and keyTimes
instead of from
and to
.calcMode="spline"
.<svg>
element, which will rotate its (rectangular) bounding box and consequently can lead to the document body changing dimensions. Instead, rotate the group containing the wheel. You can add the animated transformation to the static one by setting additive="sum"
.<svg viewBox='0 0 200 200' style='width:400px;'>
<g transform="translate(100,100)" stroke="#000" stroke-width="2">
<path d="M0 0-70 70A99 99 0 0 1-70-70Z" fill="#f00"/>
<path d="M0 0-70-70A99 99 0 0 1 70-70Z" fill="#080"/>
<path d="M0 0 70-70A99 99 0 0 1 70 70Z" fill="#dd0"/>
<path d="M0 0 70 70A99 99 0 0 1-70 70Z" fill="#04e"/>
<animateTransform
attributeName="transform"
type="rotate"
additive="sum"
values="0;3600"
keyTimes="0;1"
dur="5s"
calcMode="spline"
keySplines="0 .9 .5 1" id='rad_rotate' />
</g>
</svg>