SVG：带有动画路径的 animateMotion

Question

this fiddle 中有 2 条动画路径，curve0：

<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>

和曲线1，

<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> 

您可以看到椭圆与 curve0 一起很好地移动，但是如果您将第 36 行和第 46 行的 curve0 更改为 curve1，椭圆将停止移动。

为什么 curve1 不起作用，规范中的哪个位置 animateMotion 使用一种动画路径而不是另一种？

Answer 1

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

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

见fiddle。