<animate>

SVG の <animate> 要素は、時間の経過に応じて要素の属性を変化させる方法を提供します。

<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, dur, end, min, max, restart, repeatCount, repeatDur, fill
アニメーション値属性
calcMode, values, keyTimes, keySplines, from, to, by
その他のアニメーション属性
特に重要なもの: attributeName, additive, accumulate
アニメーションイベント属性
特に重要なもの: onbegin, onend, onrepeat

グローバル属性

コア属性
特に重要なもの: id
スタイル属性
class, style
イベント属性
グローバルイベント属性, 文書要素イベント属性

使用上の注意

この要素は SVGAnimateElement インターフェイスを実装しています。

アクセシビリティの考慮事項

点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。

アニメーションを一時停止したり無効にしたりする仕組みを提供したり、 Reduced Motion Media Query を使用して、アニメーションなしの利用を設定したユーザーに適したっ利用方法を作成するようにすることを検討してください。

仕様書

仕様書 状態 備考
SVG Animations Level 2
<animate> の定義
編集者草案 変更なし
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<animate> の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
animateChrome 完全対応 2Edge ? Firefox 完全対応 4IE 未対応 なしOpera 完全対応 9Safari 完全対応 4WebView Android 完全対応 4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 4Samsung Internet Android 完全対応 1.0
attributeNameChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
attributeTypeChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
durChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fromChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
repeatCountChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
toChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明