In an SVG - how can you speed up an animation or change its duration without using javascript?

user_773210 0
Viewed 175

How can you change the duration of an animationTransition in an SVG to make the animation speed up or slow down? I tried the below, where the dur attribute would change.

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite">
             <animate  attributeType="XML" attributeName="dur" values="10s;5s;1s" dur="3s" />
         </animateTransform>
    </polygon>
</svg>

This doesn't end up working.

I cannot use javascript for this purpose (just want to use pure svg).

Any suggestions?

animation svg html
1 Answers

You can use keytimes and multiple values to have the animation run as you wish.

Your total duration is 10 + 5 + 1 seconds i.e. 16 seconds

So your keyTimes need to be from 0 to 10/16, then to 15/16 and finally the end i.e. 1

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          values="0 60 70;360 60 70;720 60 70;1080 60 70;"
                          keyTimes="0 ; 0.625 ; 0.9375 ; 1"
                          dur="16s"
                          repeatCount="indefinite">

         </animateTransform>
    </polygon>
</svg>

user_10380150
Related