The dur
attribute indicates the simple duration of an animation.
Five elements are using this attribute: <animate>
, <animateColor>
, <animateMotion>
, <animateTransform>
, and <set>
html, body, svg { height: 100%; }
<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>
Usage notes
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 likehh:mm:ss.iii
ormm: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 ifmedia
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).
Specifications
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of 'dur' in that specification. |
Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'dur' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
dur | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- No support
- No support
- Compatibility unknown
- Compatibility unknown