SVG的加载完成后, SVG的动画时钟开始计时。当用户离开页面时, 它将停止打勾。
有三种方法可以将特定动画片段的开始或持续时间指定为数值：
- 完整的时钟值以小时, 分钟和秒来定义, 就像：(1:20:23)。
- 部分时钟值以分钟和秒为单位定义, 就像：(2:15)。
- 矩阵时间值可以用h(小时), min(分钟), s(秒)或ms(毫秒)定义, 就像：dur =” 5s” begin =” 2min”。
例子
<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg xmlns="http://www.srcmini.org/2000/svg"
xmlns:xlink="http://www.srcmini.org/1999/xlink">
<circle cx="60" cy="60" r="30" style="fill: blue; fill-opacity: .6; stroke:black;" >
<animate id="p1" attributeName="r" attributeType="XML"
from="30" to="10" begin="0s" dur="4s" fill="freeze"/>
</circle>
<circle cx="120" cy="60" r="10" style="fill: red; fill=opacity: .5; stroke: black;">
<animate attributeName="r" attributeType="XML"
begin="p1.end" dur="4s" from="10" to="30" fill="freeze"/>
</circle>
</svg>
</body>
</html>立即测试
结束元素
end元素用于暂停动画。你可以根据需要设置值。
例子
<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg width="500" height="500">
<rect x="10" y="10" width="200" height="40"
style="stroke: black; fill: green; fill-opacity: 0.5;">
<animate attributeName="width" attributeType="XML"
begin="0s" dur="12s" end="5s"
from="10" to="200" fill="freeze"/>
</rect>
</svg>
</body>
</html>立即测试
