CODEWITHSUNDEEP
htmlsvgsvg-animate
ljdayekh
ljdayekh

Reputation: 95

Animate svg on path drawn

I'm trying to animate a circle to move along a drawn path but the circle is going off rails and rotating in circular motion but back and forth instead of clockwise.

<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3" d="M303.5,107c0,7-4.8,12.7-12.7,12.7c-7.9,0-12.6-5.7-12.6-12.7c0-7,4.8-12.7,12.6-12.7 C298.5,94.3,303.5,100,303.5,107"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>

first path is the line and the second path is the circle. don't know how to convert it to .

Upvotes: 1

Views: 100

Answers (1)

enxaneta
enxaneta

Reputation: 33024

Tha path you animate must have the center in the origin of the svg canvas. You can either rewrite the code for the path or translate it to the origin

<svg viewBox="60 60 360 360" width="300">
<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3" transform="translate(-290.85,-107)" d="M303.5,107c0,7-4.8,12.7-12.7,12.7c-7.9,0-12.6-5.7-12.6-12.7c0-7,4.8-12.7,12.6-12.7 C298.5,94.3,303.5,100,303.5,107"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>
</svg>

This is a second example where I've rewritten the #XMLID_15_ path (this is the path that is supposed to be animated). In order to rewrite the path I've transformed yours to all-relative path using this pen: https://codepen.io/leaverou/pen/RmwzKv

Once I have it to all relative I can change the first move to command (M) by resting the values for the actual center from the coordinates of the move to.

<svg viewBox="60 60 360 360" width="300">
<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3"  d="M12.65,0c0,7,-4.8,12.7,-12.7,12.7c-7.9,0,-12.6,-5.7,-12.6,-12.7c0,-7,4.8,-12.7,12.6,-12.7c7.7,0,12.7,5.7,12.7,12.7"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>
</svg>

OBSERVATION:

If you are asking yourself why this strange movement: the #XMLID_38_ path is a path with a hole where yoy draw the first part of the path in a direction then you move to a different point and draw the hole in the opposite direction. That's why the animated shape is moving first in one direction, then jumps to a different point and continues moving in the opposite direction like the path you are using as a track.

Upvotes: 3

Related Questions