Animation SVG：使用动画路径设置情感动画

在中有两个动画路径，曲线0：

曲线1

正如您所看到的，椭圆随着曲线0移动，但如果将第36行和第46行的曲线0更改为曲线1，椭圆将停止移动

---

为什么curve1不起作用？在规范状态中，AnimateMootion使用一种动画路径而不是另一种路径？

它可以工作，但您需要将元素更改为指向curve1，而不仅仅是元素（绘制曲线）

---

我在最新版本的Chrome、Safari和Firefox中试过小提琴，但只有在Firefox中它才起作用。FWIW它在Opera 12（Presto）中也起作用。看起来像是webkit/chrome中的一个bug。
<path id="curve0" stroke="black" fill="inherit" stroke-width="3" 
    fill-opacity=".5"
    d="M 0,100 
        C  50,100  50,50, 100,50 C 150,50 150,100 200,100
        C 300,100 200,50, 300,50 C 400,50 300,100 400,100">
    <animate attributeName="d"  dur="5s" 
        values="M 0,100 
        C  50,100  50,50, 100,50 C 150,50 150,150 200,150
        C 250,150 250,50, 300,50 C 350,50 350,100 400,100;

        M 0,100 
        C  50,100  50,150, 100,150 C 150,150 150, 50 200, 50
        C 250, 50 250,150, 300,150 C 350,150 350,100 400,100;

        M 0,100 
        C  50,100  50,50, 100,50 C 150,50 150,150 200,150
        C 250,150 250,50, 300,50 C 350,50 350,100 400,100" 
    repeatCount="indefinite"/>
</path>

<path id="curve1" stroke="black" fill="yellowgreen" stroke-width="3" fill-opacity=".5" >
    <animate attributeName="d"  dur="3s" 
        values="M 100,0  0,100   70,50   130,150  200,100  z;
                M 100,0  0,100   70,150  130, 50  200,100  z;
                M 100,0  0,100   70,50   130,150  200,100  z" 
        repeatCount="indefinite"/>
</path> 

<animateMotion dur="5s" rotate="auto" repeatCount="indefinite">
  <mpath xlink:href="#curve1"/>
</animateMotion>