SVG动画（使用时间介绍和示例） _动画

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>

【SVG动画（使用时间介绍和示例）】立即测试