0

I am trying to animate an image along a path in SVG. The object does get animated along the defined path but away from its intended position. I am not able too see as to what's wrong with the code. Hope someone would come to my rescue. Thanks in advance.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300px" height="400px">
<path id="fave" fill="#F57C00" d="M102.539,32.054c-0.107-4.268-3.523-7.711-7.775-7.863c-0.101-0.004-0.199-0.006-0.299-0.006
    s-0.197,0.002-0.298,0.006c-2.815,0.102-5.263,1.645-6.625,3.91c-1.364-2.266-3.812-3.809-6.626-3.91
    c-0.1-0.004-0.198-0.006-0.298-0.006c-0.099,0-0.198,0.002-0.298,0.006c-4.254,0.152-7.668,3.596-7.776,7.9
    c-0.002,0.068-0.002,0.139-0.002,0.207c0,0.1,0,0.1,0,0.207c0.104,8.7,6.7,16.3,15,20.5c8.284-4.215,14.894-11.814,14.997-20.504
    c0.003-0.068,0.003-0.139,0.003-0.207s0-0.194-0.042-0.24H102.539z">
    <animateMotion  fill="freeze" calcMode="paced" restart="always" additive="replace" dur="0.5s" accumulate="none">
        <mpath  xlink:href="#favepath"></mpath>
    </animateMotion>
</path>
<path id="favepath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M64.075,138.9l23.467-85.896"/>
</svg>

1 Answer 1

1

If you want it to animate along the path itself you need to change the d of #fave.

It wasn't clear how you wanted to do it, so I changed the initial two values of the Moveto (M) from M102.539,32.054 to M0,0 to get this result which animates it from the right edge. For more information about that attribute, check out this useful article.

You should read some specs on the properties and attributes of the SVG elements you're using so you can better understand what's going on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.