<animate>

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

<animate> SVG 元素提供了一種隨時間推移為元素屬性設定動畫的方法。

使用語境

分類動畫元素
允許內容可包含任意數量、任意順序的下列元素
描述性元素

屬性

此元素僅包含全域性屬性。

DOM 介面

此元素實現了 SVGAnimateElement 介面。

示例

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>

可訪問性考慮

閃爍和閃光動畫可能會對患有認知障礙(如注意力缺陷多動障礙 (ADHD))的人造成困擾。此外,某些型別的運動可能會誘發前庭障礙、癲癇和偏頭痛以及視網膜敏感性。

請考慮提供一種暫停或停用動畫的機制,以及使用 Reduced Motion Media Query 或等效的 使用者代理客戶端提示 Sec-CH-Prefers-Reduced-Motion,為那些偏好無動畫體驗的使用者建立互補的體驗。

規範

規範
SVG 動畫級別 2
# AnimateElement

瀏覽器相容性