动画标签中的 SVG begin="id.end" 属性不起作用答案

【问题标题】：SVG begin="id.end" attribute in animate tag not working动画标签中的 SVG begin="id.end" 属性不起作用
【发布时间】：2015-03-08 19:32:06
【问题描述】：

为什么我在下面的代码片段中做错了？为什么在圆形结束动画后，Chrome(v 39) 和 Firefox(v 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>

【问题讨论】：

标签： google-chrome firefox svg

【解决方案1】：

要么将圆的 id 从 circ-anim 更改为 circ 并修复开始引用，要么转义 - 符号，它会起作用。

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

您可以通过

转义 SMIL 中的 id

xlink:href="#orange\-circle"

如果你真的想保留符号字符。

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

构建一个令牌子字符串，最多但不包括任何符号指示符（即去除任何偏移量）...

【讨论】：