为什么不与路径一起工作？
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595px" height="841px" viewBox="0 0 595px 841px" enable-background="new 0 0 595 841" xml:space="preserve"
style="border:1px solid green">
<g id="car">
<path fill="#00CC92" d="M405.1,607.225c0,0,1.731-1.022,9.084-1.086c0.466-0.007,9.269-8.254,9.678-8.561
c0.99-0.767,1.194-1.284,3.667-1.476c3.028,0,20.601-0.025,20.601-0.025s6.229-0.332,7.736,2.434
c0.479,0.575,4.434,7.237,4.503,7.596c0,0,0.135,0.159,0.333,0.498c0.472,0.805,1.341,3.723,1.813,6.777
c0.052,0.191,0.09,0.383,0.09,0.588v3.354c0,1.232-1.003,2.236-2.236,2.236h-0.102c0.064-0.365,0.102-0.734,0.102-1.119
c0-3.705-3.002-6.707-6.707-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119h-29.271
c0.064-0.365,0.103-0.734,0.103-1.119c0-3.705-3.003-6.707-6.708-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119
h-2.338c-1.233,0-2.236-1.004-2.236-2.236v-3.354C400.002,613.97,399.728,610.13,405.1,607.225z M442.483,605.027l11.307-0.556
l-1.246-2.798c0,0-0.767-2.235-3.354-2.235s-6.707,0-6.707,0V605.027z M421.076,606.298l3.296-0.217
c0.716-1.591,1.546-2.459,2.306-2.612c0.92-0.192,1.311,0.798,1.311,0.798v1.571l12.258-0.805v-5.558
c0,0-10.725-0.038-11.843-0.038s-2.689,1.954-2.689,1.954L421.076,606.298z M458.133,618.441c0,2.473-1.999,4.473-4.472,4.473
s-4.472-2-4.472-4.473c0-2.471,1.999-4.471,4.472-4.471S458.133,615.97,458.133,618.441z M415.653,618.441
c0,2.473-1.999,4.473-4.472,4.473c-2.472,0-4.472-2-4.472-4.473c0-2.471,2-4.471,4.472-4.471
C413.654,613.97,415.653,615.97,415.653,618.441z">
</path>
</g>
<path fill="none" id="motionPath" stroke="green" stroke-width="8"
d="M400,618c0,0-127,66-112-52s134-264-90-251s-63-117-56-170"></path>
<animateMotion xlink:href="#car" dur="5s" begin="click" fill="freeze" >
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</svg>
答案 0 :(得分：0)
您遇到的问题是由于车辆在页面上的位置被添加到路径上的（动画）位置。因此，当您点击汽车时，它会有效地跳转：
(motionPath.x + car.x, motionPath.y + car.y)
要解决此问题，您必须执行以下两项操作之一：
由于您希望汽车从页面上的位置开始，因此您可以点击它，您基本上被迫选择选项＃1。
在下面的示例中，我将运动路径更改为以（0,0）开头的运动路径。我只是使用了一条简单的线条，因为我没有时间为你的整条路径设计出新的坐标。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595px" height="841px" viewBox="0 0 595px 841px" enable-background="new 0 0 595 841" xml:space="preserve"
style="border:1px solid green">
<g>
<path id="car"
fill="#00CC92" d="M405.1,607.225c0,0,1.731-1.022,9.084-1.086c0.466-0.007,9.269-8.254,9.678-8.561
c0.99-0.767,1.194-1.284,3.667-1.476c3.028,0,20.601-0.025,20.601-0.025s6.229-0.332,7.736,2.434
c0.479,0.575,4.434,7.237,4.503,7.596c0,0,0.135,0.159,0.333,0.498c0.472,0.805,1.341,3.723,1.813,6.777
c0.052,0.191,0.09,0.383,0.09,0.588v3.354c0,1.232-1.003,2.236-2.236,2.236h-0.102c0.064-0.365,0.102-0.734,0.102-1.119
c0-3.705-3.002-6.707-6.707-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119h-29.271
c0.064-0.365,0.103-0.734,0.103-1.119c0-3.705-3.003-6.707-6.708-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119
h-2.338c-1.233,0-2.236-1.004-2.236-2.236v-3.354C400.002,613.97,399.728,610.13,405.1,607.225z M442.483,605.027l11.307-0.556
l-1.246-2.798c0,0-0.767-2.235-3.354-2.235s-6.707,0-6.707,0V605.027z M421.076,606.298l3.296-0.217
c0.716-1.591,1.546-2.459,2.306-2.612c0.92-0.192,1.311,0.798,1.311,0.798v1.571l12.258-0.805v-5.558
c0,0-10.725-0.038-11.843-0.038s-2.689,1.954-2.689,1.954L421.076,606.298z M458.133,618.441c0,2.473-1.999,4.473-4.472,4.473
s-4.472-2-4.472-4.473c0-2.471,1.999-4.471,4.472-4.471S458.133,615.97,458.133,618.441z M415.653,618.441
c0,2.473-1.999,4.473-4.472,4.473c-2.472,0-4.472-2-4.472-4.473c0-2.471,2-4.471,4.472-4.471
C413.654,613.97,415.653,615.97,415.653,618.441z">
</path>
</g>
<path fill="none" id="motionPath" stroke="green" stroke-width="8"
d="M 0,0 L -250,-470" transform="translate(431,609)"></path>
<animateMotion xlink:href="#car" dur="5s" begin="click" fill="freeze" >
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</svg>
您可能想知道为什么，如果移动了运动路径，为什么它仍然显示在同一个地方？原因是我已经在运动路径中添加了变换，因此起点对应于汽车的中心，大约是（431,609）。这不会影响animateMotion，因为它只关心d属性中的内容。它会忽略transform属性。
<强>更新
另一种选择是将汽车的路径和放在一起，以便它们从（0,0）开始。然后将整个事物包裹在一组中，然后转换到最终位置。这样您就可以在动画中使用rotate属性。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="595px" height="841px" viewBox="0 0 595 841"
style="border:1px solid green">
<g transform="translate(431,609)">
<g id="car">
<path transform="translate(-431,-626)"
fill="#00CC92" d="M405.1,607.225c0,0,1.731-1.022,9.084-1.086c0.466-0.007,9.269-8.254,9.678-8.561
c0.99-0.767,1.194-1.284,3.667-1.476c3.028,0,20.601-0.025,20.601-0.025s6.229-0.332,7.736,2.434
c0.479,0.575,4.434,7.237,4.503,7.596c0,0,0.135,0.159,0.333,0.498c0.472,0.805,1.341,3.723,1.813,6.777
c0.052,0.191,0.09,0.383,0.09,0.588v3.354c0,1.232-1.003,2.236-2.236,2.236h-0.102c0.064-0.365,0.102-0.734,0.102-1.119
c0-3.705-3.002-6.707-6.707-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119h-29.271
c0.064-0.365,0.103-0.734,0.103-1.119c0-3.705-3.003-6.707-6.708-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119
h-2.338c-1.233,0-2.236-1.004-2.236-2.236v-3.354C400.002,613.97,399.728,610.13,405.1,607.225z M442.483,605.027l11.307-0.556
l-1.246-2.798c0,0-0.767-2.235-3.354-2.235s-6.707,0-6.707,0V605.027z M421.076,606.298l3.296-0.217
c0.716-1.591,1.546-2.459,2.306-2.612c0.92-0.192,1.311,0.798,1.311,0.798v1.571l12.258-0.805v-5.558
c0,0-10.725-0.038-11.843-0.038s-2.689,1.954-2.689,1.954L421.076,606.298z M458.133,618.441c0,2.473-1.999,4.473-4.472,4.473
s-4.472-2-4.472-4.473c0-2.471,1.999-4.471,4.472-4.471S458.133,615.97,458.133,618.441z M415.653,618.441
c0,2.473-1.999,4.473-4.472,4.473c-2.472,0-4.472-2-4.472-4.473c0-2.471,2-4.471,4.472-4.471
C413.654,613.97,415.653,615.97,415.653,618.441z">
</path>
</g>
<path fill="none" id="motionPath" stroke="green" stroke-width="8"
d="M 0,0 L -250,-470"/>
<animateMotion xlink:href="#car" dur="5s" begin="click" fill="freeze"
rotate="auto-reverse">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</g>
</svg>