持续时间
dur
属性指示动画的简单持续时间。
你可以将此属性与以下 SVG 元素一起使用
示例
html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100">
<animate
attributeType="XML"
attributeName="y"
from="0"
to="50"
dur="1s"
repeatCount="indefinite" />
</rect>
<rect x="120" y="0" width="100" height="100">
<animate
attributeType="XML"
attributeName="y"
from="0"
to="50"
dur="3s"
repeatCount="indefinite" />
</rect>
</svg>
用法说明
值 |
<clock-value> | media | indefinite |
---|---|
默认值 | indefinite |
可动画的 | 否 |
<clock-value>
-
此值指定简单持续时间的长度。该值必须大于 0,并可以表示为小时 (
h
)、分钟 (m
)、秒 (s
) 或毫秒 (ms
)。可以组合这些时间表示来创建复杂的持续时间,例如hh:mm:ss.iii
或mm:ss.iii
。 媒体
-
此值指定简单持续时间为内在媒体持续时间。这仅对定义媒体的元素有效。(对于 动画元素,如果指定了
media
,则将忽略该属性。) indefinite
-
此值指定简单持续时间为无限。
规范
规范 |
---|
SVG 动画级别 2 # DurAttribute |
浏览器兼容性
加载中…