The dur
attribute indicates the simple duration of an animation.
You can use this attribute with the following SVG elements:
The dur
attribute indicates the simple duration of an animation.
You can use this attribute with the following SVG elements:
<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>
Value | <clock-value> | media | indefinite |
---|---|
Default value | indefinite |
Animatable | No |
<clock-value>
This value specifies the length of the simple duration. The value must be greater than 0 and can be expressed with hours (h
), minutes (m
), seconds (s
) or milliseconds (ms
). It's possible to combine those time representations to create some complex durations like hh:mm:ss.iii
or mm:ss.iii
.
media
This value specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media. (For animation elements the attribute will be ignored if media
is specified.)
indefinite
This value specifies the simple duration as indefinite.
Note: the interpolation will not work if the simple duration is indefinite (although this may still be useful for <set>
elements).
Specification |
---|
SVG Animations Level 2 # DurAttribute |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
dur |
No | No | No | No | No | No | No | No | No | No | No | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dur