dur
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
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-
この値は、単独の再生時間を内在的なメディア再生時間で指定します。これは、メディアを定義する要素に対してのみ有効です。 （アニメーション要素の場合、
mediaが指定されていると、この属性は無視されます。） indefinite-
この値は、単独の再生時間を「無期限」として指定します。
仕様書
| Specification |
|---|
| SVG Animations Level 2 # DurAttribute |