svgsvg-animatejquery-svg

Moving Circles with Polyline's points concurrently in SVG

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:

enter image description here enter image description here

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

Any help would be appreciated!

Solution

  • 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>