Я пытаюсь анимировать изображение по пути в SVG. Объект анимируется по заданному пути, но не в его предполагаемом положении. Я не могу понять, что не так с кодом. Надеюсь, кто-нибудь придет мне на помощь. Заранее спасибо.
<?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>
Если вы хотите, чтобы он анимировался по самому пути, вам нужно изменить dфайл #fave.
Было неясно , как вы хотели это сделать, поэтому я изменил начальные два значения Moveto(M) с M102.539,32.054на M0,0, чтобы получить этот результат , который анимирует его с правого края. Для получения дополнительной информации об этом атрибуте ознакомьтесь с этой полезной статьей .
Вы должны прочитать некоторые спецификации свойств и атрибутов элементов SVG, которые вы используете, чтобы вы могли лучше понять, что происходит.