Question

我有一段svg代码将动画链接到一个简单的路径，并且效果很好：

<path id="p0" d="M 110,150 C 300,80 400,300 450,100  500,-100 -90,220 110,150" 
stroke="black" fill="none" stroke-width="1" />
<ellipse  rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze" 
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</animateMotion>
</ellipse>

现在我需要在动画路径上拥有相同的动画。我尝试了以下方法：

<path id = "p0" stroke = "black" stroke-width = "1" fill = "none" >
<animate attributeName="d" dur="2s" repeatCount="indefinite" values=
"M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 400 100 200;
M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 100 100 200;
M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 400 100 200" />
</path>
<ellipse  rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze" 
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</ellipse>

但无济于事：椭圆不遵循路径并保持不可见......

有什么想法吗？它至少可能吗？

提前致谢。

编辑：我刚刚注意到它适用于Firefox，但问题是它只将椭圆链接到路径值的第一部分;换句话说，它不遵循路径动画...... :(

Answer 1

如果您为路径指定了有效的d属性，则它似乎可以在Chrome中使用。

<svg width="500" height="500">
  <path id = "p0" stroke = "black" stroke-width = "1" fill = "none"
        d="M 100 200 C 100 150 250 150 100 100 C 0 50 100 400 100 200">
    <animate attributeName="d" dur="2s" repeatCount="indefinite" values=
"M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 400 100 200;
M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 100 100 200;
M 100 200
  C 100 150 250 150 100 100 
  C 0 50 100 400 100 200" />
  </path>
  <ellipse  rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
    <animateMotion id="One" dur="10s" fill="freeze" 
rotate="auto" repeatCount="indefinite" >
      <mpath xlink:href="#p0"/>
    </animateMotion>
  </ellipse>
</svg>

动画路径上的svg动画

1 个答案: