restart
restart 属性は、アニメーションを再起動できるかどうかを示します。
この属性は、以下の SVG 要素で使用することができます。
例
html
<svg viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg">
<rect y="30" width="100" height="100">
<animate
attributeType="XML"
attributeName="y"
from="30"
to="100"
dur="5s"
repeatCount="1"
restart="always" />
</rect>
<rect x="120" y="30" width="100" height="100">
<animate
attributeType="XML"
attributeName="y"
from="30"
to="100"
dur="5s"
repeatCount="1"
restart="whenNotActive" />
</rect>
<a id="restart"><text y="20">Restart animation</text></a>
</svg>
js
document.getElementById("restart").addEventListener("click", (evt) => {
document.querySelectorAll("animate").forEach((element) => {
element.beginElement();
});
});
使用上のメモ
| 値 |
always | whenNotActive | never
|
|---|---|
| デフォルト値 | always |
| アニメーション | 不可 |
always-
この値は、アニメーションをいつでも再開することが可能であることを示しています。
whenNotActive-
この値は、アニメーションがアクティブでない状態（つまり、アクティブ期間が終了した後）でのみ、アニメーションを再起動することができることを示します。アニメーションのアクティブ期間中に再起動を試みても、無視されます。
never-
この値は、アニメーションを再起動できないことを示しています。
仕様書
| Specification |
|---|
| SVG Animations Level 2 # RestartAttribute |