<animate>

SVG 的<animate>元素提供了一種方法，可以在一段時間內對元素的屬性進行動畫處理。

示例

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}

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>

使用說明

此元素實現了SVGAnimateElement介面。

無障礙問題

閃爍和閃光動畫可能對患有認知障礙（如注意力缺陷多動障礙 (ADHD)）的人造成問題。此外，某些型別的運動可能是前庭障礙、癲癇、偏頭痛和暗視症的誘因。

考慮提供暫停或停用動畫的機制，以及使用減少運動媒體查詢或等效的使用者代理客戶端提示 Sec-CH-Prefers-Reduced-Motion為表示希望沒有動畫體驗的使用者建立互補體驗。

規範

規範
SVG 動畫級別 2 # AnimateElement

瀏覽器相容性

BCD 表格僅在瀏覽器中載入