SVG:沿着动画路径的animateMotion

时间:2014-01-20 19:59:03

标签: svg svg-animate

当我沿着动画路径使用animateMotion时,Firefox(26)会遵循原始路径,而Opera(17)和Chrome(32)会遵循更改路径。例如,在下面的svg中,红色矩形在FF中的位置100,10结束,而在其他浏览器中则为50,10:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
 <path id="p" stroke="black" stroke-width="1" d="M 0,10 100,10"/>
 <rect id="r" x="-5" y="-5" width="10" height="10" fill ="red"/>
 <animate xlink:href="#p" attributeName="d" to="M 0,10 50,10" dur="5s" fill="freeze" repeatCount="1"/>
 <animateMotion xlink:href="#r" dur="5s" fill="freeze" repeatCount="1">
  <mpath xlink:href="#p"/>
 </animateMotion>
</svg>

根据SVG规范,正确的行为是什么?

1 个答案:

答案 0 :(得分:1)

应该使用动画路径,其上有一个open Firefox bug