<animate>
SVG の <animate>
要素は、時間の経過に応じて要素の属性を変化させる方法を提供します。
html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect width="10" height="10">
<animate
attributeName="rx"
values="0;5;0"
dur="10s"
repeatCount="indefinite" />
</rect>
</svg>
属性
アニメーション属性
- アニメーションタイミング属性
begin (en-US)
,dur (en-US)
,end
,min (en-US)
,max (en-US)
,restart (en-US)
,repeatCount (en-US)
,repeatDur (en-US)
,fill
- アニメーション値属性
calcMode (en-US)
,values (en-US)
,keyTimes (en-US)
,keySplines (en-US)
,from (en-US)
,to (en-US)
,by (en-US)
- その他のアニメーション属性
-
特に重要なもの:
attributeName (en-US)
,additive (en-US)
,accumulate (en-US)
- アニメーションイベント属性
グローバル属性
- コア属性
-
特に重要なもの:
id
- スタイル属性
class (en-US)
,style (en-US)
- イベント属性
使用上の注意
この要素は SVGAnimateElement
(en-US) インターフェイスを実装しています。
アクセシビリティの考慮事項
点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。
アニメーションを一時停止したり無効にしたりする仕組みを提供したり、 Reduced Motion Media Query を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。
仕様書
Specification |
---|
SVG Animations Level 2 # AnimateElement |
ブラウザーの互換性
BCD tables only load in the browser