Ich versuche, ein Bild entlang eines Pfades in SVG zu animieren. Das Objekt wird zwar entlang des definierten Pfads animiert, aber weg von seiner beabsichtigten Position. Ich bin nicht in der Lage zu sehen, was mit dem Code falsch ist. Hoffe, jemand würde zu meiner Rettung kommen. Vielen Dank im Voraus.
<?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>
Wenn Sie möchten, dass es entlang des Pfads selbst animiert wird, müssen Sie die dvon ändern #fave.
Es war nicht klar , wie Sie es machen wollten, also habe ich die ersten beiden Werte von Moveto(M) von M102.539,32.054in geändert, um dieses ErgebnisM0,0 zu erhalten , das es vom rechten Rand aus animiert. Weitere Informationen zu diesem Attribut finden Sie in diesem nützlichen Artikel .
Sie sollten einige Spezifikationen zu den Eigenschaften und Attributen der von Ihnen verwendeten SVG-Elemente lesen, damit Sie besser verstehen, was vor sich geht.