Moving Circles with Polyline's points concurrently in SVG

Question

I wish to make the circles move along the with polyline's points while the polyline is animating.

This is my progress so far: https://jsfiddle.net/xgr6q4cy/

Here is my codes:

<svg id="svg" viewBox="0 0 415 415" xmlns="http://www.w3.org/2000/svg">
   <polyline 
            id="poly1"
            fill="blue" 
            stroke="red" 
            stroke-linecap="round"
            points="97,122 34,85 90,35 198,40 34,85"
            >
            <animate 
                id="one"
                attributeName="points"
                dur="5s" 
                begin="0s;two.end"
            to="97,82 34,85 90,55 198,40 34,85"
            fill="freeze"
            />
            <animate 
                id="two"
                attributeName="points" 
                dur="5s" 
                begin="one.end"
            to="97,122 34,85 90,35 198,40 34,85"
            fill="freeze"
            />


        </polyline>

        <circle cx="34" cy="85" r="3" fill="red"></circle>
        <circle cx="90" cy="35" r="3" fill="red"></circle>
        
        <circle cx="198" cy="40" r="3" fill="red"></circle>
        <circle cx="97" cy="122" r="3" fill="red"></circle>
</svg>

Screenshots of my progress:

I want to make sure the circles follow the polyline while the polyline is animating by using SVG SMIL

Any help would be appreciated!

Answer 1

In order to animate the circles you will need to animate the cy attribute using the same begin and dur values as the animation of the polyline.

Please observe that for the animation I'm using a values attribute instead of the to & from attributes. The values are separated with semicolons (;). The first and the last values are the same.

<svg id="svg" viewBox="0 0 415 415" xmlns="http://www.w3.org/2000/svg">
  <polyline id="poly1" fill="blue" stroke="red" stroke-linecap="round" points="97,122 34,85 90,35 198,40 34,85">
    <animate attributeName="points" 
             dur="5s" 
             begin="0s" 
             repeatCount="indefinite" 
             values="97,82 34,85 90,55 198,40 34,85;
                     97,122 34,85 90,35 198,40 34,85;
                     97,82 34,85 90,55 198,40 34,85" />
  </polyline>

  <circle cx="34" cy="85" r="3" fill="red"></circle>
  <circle cx="198" cy="40" r="3" fill="red"></circle>
  <circle cx="90" cy="35" r="3" fill="red">
    <animate attributeName="cy" 
             dur="5s" 
             begin="0s" 
             repeatCount="indefinite" 
             values="55;35;55" />
  </circle>
  <circle cx="97" cy="122" r="3" fill="red">
    <animate attributeName="cy" 
             dur="5s" 
             begin="0s" 
             repeatCount="indefinite" 
             values="82;122;82" />
  </circle>
</svg>

Answer 2

You can define a marker, a graphic that is drawn at polyline points (no matter how they move).

<svg id="svg" viewBox="0 0 415 415" xmlns="http://www.w3.org/2000/svg">

    <!--define a marker - the red circle-->
    <marker id="circle" refX="3" refY="3" markerWidth="6" markerHeight="6" viewport="0 0 6 6">
        <circle cx="3" cy="3" r="3" fill="red"></circle>
    </marker>

    <!--here the marker-* attributes put the circle marker to every point-->
    <!--marker-end isn't actually needed in your case-->
    <!--because the end-point is the same as the second one-->
    <polyline 
        marker-start="url(#circle)"
        marker-mid="url(#circle)"
        marker-end="url(#circle)"
        
        id="poly1"
        fill="blue" 
        stroke="red" 
        stroke-linecap="round"
        points="97,122 34,85 90,35 198,40 34,85"
        >
        <animate 
            id="one"
            attributeName="points"
            dur="5s" 
            begin="0s;two.end"
        to="97,82 34,85 90,55 198,40 34,85"
        fill="freeze"
        />
        <animate 
            id="two"
            attributeName="points" 
            dur="5s" 
            begin="one.end"
        to="97,122 34,85 90,35 198,40 34,85"
        fill="freeze"
        />

    <!--no more circles are needed-->

    </polyline>


</svg>