Change svg speed of AnimateTransform speed

Question

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>

Use keySplines and keyTimes with values rather than from/to: https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#timing — Robert Longson, May 26 '23 at 21:14
see ``keySplines`` used in https://stackoverflow.com/questions/26926999/svg-smil-animatetransform-easing — Danny '365CSI' Engelman, May 27 '23 at 09:01

score 1 · Accepted Answer · answered May 27 '23 at 13:12

Like this?

Nothing prevents you from defining multiple turns of the wheel by setting the to value to multiples of 360. For compatibility with all browsers, you should use attributes values and keyTimes instead of from and to.
Do not define infinite repetitions, but one primitive duration during which the motion is eased to a standstill with one spline definition. Do not forget the calcMode="spline".
Do not rotate the <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>

Thanks. Exactly what I was searching for. – user2051376 May 28 '23 at 08:06 — user2051376, May 28 '23 at 08:06

Change svg speed of AnimateTransform speed

1 Answers1