oab*_*rca 2 firefox svg google-chrome
为什么我在下面的代码片段中做错了？为什么在圆形结束动画后，矩形在 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>
将圆的 id 从 circ-anim 更改为 circ 并修复开始引用或转义 - 符号，它将起作用。
SMIL 使用 + 和 - 来指示偏移量，例如 begin="circ.end - 1" 将在 circ 动画结束前 1 秒开始，因此您不能在要设置动画的 id 中使用 + 或 - 。
您可以通过以下方式转义 SMIL 中的 id
xlink:href="#orange\-circle"
如果你真的想保留符号字符。
SMIL 规范谈到了解析 begin 属性......
构建一个标记子字符串，但不包括任何符号指示符（即去掉任何偏移量）...
| 归档时间： |
|
| 查看次数： |
1260 次 |
| 最近记录： |