: Object getting displaced while animating - SVG 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 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>
More posts by @Alves566
1 Comments
Sorted by latest first Latest Oldest Best
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.