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>

和 curve1 ，

<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 ，则椭圆会停止移动。 / p>

为什么 curve1 不起作用，并且规范中的哪些地方 animateMotion 适用于一种动画路径而不是另一种？

Answer 1

它有效，但您需要更改＆lt; mpath＆gt;元素也指向curve1，而不仅仅是＆lt; use＆gt;元素（绘制曲线）。

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

请参阅fiddle。

SVG：带动画路径的animateMotion

1 个答案: