How to animate svg path d attribute with animate tag

Question

Im trying to animate a svg path with animate tag, following this tutorial from css tricks. I could animate path with css keyframes, and the result is this:

#mySvg path{    
    animation: scale-path 10s ease-in-out infinite;
}

@keyframes scale-path {
    50% {
        d: path('M1036,540L883,540L883,693Z');
    }
}

<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     x="0"
     y="0"
     width="100%"
     height="100%" 
     viewBox="0 0 1920 1080" 
     preserveAspectRatio="none">
      
     <path d="M1045,520L1173,558L1184,393Z"   
              fill="lightblue" 
              stroke="#eee9ea" 
              stroke-width="1.51" />
</svg>

But the problem is I cant achieve the same effect animation with animate tag (its supposed to will be there a lot of path tags with different animations). Im not sure if this is the correct syntax:

<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     x="0"
     y="0"
     width="100%"
     height="100%" 
     viewBox="0 0 1920 1080" 
     preserveAspectRatio="none">
      
    <path d="M1045,520L1173,558L1184,393Z" 
          fill="lightblue" 
          stroke="#eee9ea" 
          stroke-width="1.51">
          
            <animate 
            attributeName="d"
            from="M1045, 520L1173, 558L1184, 393Z"
            to="M1036; 540L883; 540L883; 693Z" 
            dur="10s"
            repeatCount="indefinite"
            values="M1036; 540L883; 540L883; 693Z"
            keyTimes="0.5;" />
     </path>
</svg>

Temani Afif · Accepted Answer · 2018-07-31T15:18:08.470

6

You are writing the values wrongly, you should pay attention to , and ;. The whole value of the path use , as delimiter (ex : M1045, 520L1173, 558L1184, 393Z) and those values are delimited by ; inside the values attrbiute

<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     x="0"
     y="0"
     width="100%"
     height="100%" 
     viewBox="0 0 1920 1080" 
     preserveAspectRatio="none">
      
    <path d="M1045,520L1173,558L1184,393Z" 
          fill="lightblue" 
          stroke="#eee9ea" 
          stroke-width="1.51">
          
            <animate 
            attributeName="d"
            from="M1045, 520L1173, 558L1184, 393Z"
            to="M1036, 540L883, 540L883, 693Z" 
            dur="5s"
            values="M1045, 520L1173, 558L1184, 393Z;M1036, 540L883, 540L883, 693Z;M1045, 520L1173, 558L1184, 393Z"
            repeatCount="indefinite" />
     </path>
</svg>

edited Jul 31 '18 at 15:18

answered Jul 31 '18 at 14:30

Temani Afif

245,468
26
309
415

These `values` separated by `;` means 0%, 50% and 100%? – SilverSurfer Jul 31 '18 at 15:15
@SilverSurfer no I mean this is a value of d --> `M1045, 520L1173, 558L1184, 393Z` and you can have different values like this separted by `;` like in the values attribute – Temani Afif Jul 31 '18 at 15:16
So `keyframes %` doesnt exist in animate `attributes`? – SilverSurfer Jul 31 '18 at 15:19
@SilverSurfer no, its equivalent is to define the different values where you want to have transition inside the values attribute. So the animation will start from the first value and end with the last one smoothly – Temani Afif Jul 31 '18 at 15:21
Temani's answers are incorrect. *"These values separated by ; means 0%, 50% and 100%?"* Yes that is correct. *"So keyframes % doesnt exist in animate attributes?"* Yes, you can use `keyTimes` for that. But if your keyframes are evenly spaced between time "0" and time "1", you don't have to specify the timings with `keyTimes`. – Paul LeBeau Jul 31 '18 at 15:36
@PaulLeBeau Ah I didn't understand his meaning then, I thought he was talking about his initial code for the % – Temani Afif Jul 31 '18 at 15:43

Paul LeBeau · Answer 2 · 2018-07-31T15:56:20.347

Semi-colons (;) are used as separators in attributes like values and keyTimes, to mark the different keyframe values. The number of values in these two attributes should match.

You seem to have replaced commas with semicolons, which is not correct.

If you are animating between two values (A -> B), you only need from and to. If you need to animate between a series of three or more values you need to use values and keyTimes.

There is no automatic back and forth looping in SMIL animation. So if you were trying to go from A to B and then back to A, you would need to use values and keyTimes and list your values in the form "A; B; A"`.

Like this:

<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     x="0"
     y="0"
     width="100%"
     height="100%" 
     viewBox="0 0 1920 1080" 
     preserveAspectRatio="none">
      
    <path d="M 1045,520 L 1173,558 L 1184,393 Z" 
          fill="lightblue" 
          stroke="#eee9ea" 
          stroke-width="1.51">
          
            <animate 
            attributeName="d"
            dur="10s"
            repeatCount="indefinite"
            values="M 1045,520 L 1173,558 L 1184,393 Z;
                    M 1036,540 L 883,540 L 883,693 Z;
                    M 1045,520 L 1173,558 L 1184,393 Z"
            keyTimes="0; 0.5; 1" />
     </path>
</svg>

If your animation is linearly paced, and the keyTimes timings are evenly spaced, like they are here, you don't actually have to provide a keyTimes.

let's hope he get back to accept your answer .. I still need more accuracy on SVG :p — Temani Afif, Jul 31 '18 at 15:48
Your answer is fine. OP doesn't need to change their vote. I just decided to answer because I thought more explanation was needed. — Paul LeBeau, Jul 31 '18 at 15:53
Yes you are right, I totally misunderstood his comments and he probably did the same ... Also I ommited the keyTimes part because I thought they aren't necessary for him but it seems he need them as he want to control the % — Temani Afif, Jul 31 '18 at 15:55

How to animate svg path d attribute with animate tag

2 Answers2