SVG begin =“id.end”属性在动画标记不起作用

为什么我在下面的代码snnipet中做错了？为什么在圆圈结束其动画后，矩形不会在Chrome（v 39）和Firefox（v 33）中生成动画？SVG begin =“id.end”属性在动画标记不起作用

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

来源

2015-01-10 user2070775

要么改变从中国保监会动画圆的ID说中国保监会和修复了开始引用或逃避 - 符号，它会工作。

SMIL使用+和 - 来指示偏移量例如begin =“circ.end - 1”将在circ动画结束之前1秒开始，因此您不能在要制作动画的id中使用+或 - 。

您可以通过

xlink:href="#orange\-circle"

逃避SMIL的ID，如果你真的想保持符号字符。

的SMIL规范表示，这大约解析begin属性...

构建令牌串直到但不包括任何符号指示符（即去掉所有偏移）...

来源

2015-01-10 16:21:45

SVG begin =“id.end”属性在动画标记不起作用

回答

相关问题