SVG开始=" id.end" animate标记中的属性不起作用

时间:2015-01-10 16:03:00

标签: google-chrome firefox svg

为什么我在下面的代码snnipet中做错了?为什么在圆圈结束动画后,矩形不会在Chrome(第39版)和Firefox(第33版)中设置动画效果?

<!doctype html>
 <html>
 <head>
 <title>test</title>
 </head>
 <body>
     <svg width="500" height="350">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  <rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="5s"
           begin="click"
           fill="freeze" 
           id="circ-anim"/>
  
  <animate 
           xlink:href="#blue-rectangle"
           attributeName="x" 
           from="50"
           to="425" 
           dur="5s"
           begin="circ-anim.end"
           fill="freeze" 
           id="rect-anim"/>
  
</svg>
<p>Click on the circle to animate it, and animate the rectangle after it.</p>
 </body>
 </html>
 

1 个答案:

答案 0 :(得分:1)

要么从circ-anim更改圆圈的id到说圈,并修改开始引用或转义 - 符号,它将起作用。

SMIL使用+和 - 表示偏移,例如begin =“circ.end - 1”将在circ动画结束前1秒开始,因此您不能在要设置动画的ID中使用+或 - 。

您可以通过

转义SMIL中的ID
xlink:href="#orange\-circle"

如果你真的想保留标志字符。

SMIL规范说明了解析begin属性......

构建一个令牌子字符串,但不包括任何符号指示符(即剥去任何偏移量)......