<animateMotion>

SVG 的 **<animateMotion>** 元素提供了一種定義元素沿著運動路徑移動方式的方法。

注意：要重用現有路徑，需要在 <animateMotion> 元素內使用 <mpath> 元素，而不是 path 屬性。

示例

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

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

使用上下文

類別	動畫元素
允許的內容	任意數量的以下元素，按任意順序描述性元素 `<mpath>`

屬性

keyPoints: 此屬性指示物件在路徑上的位置，範圍為 [0,1]，對應於每個關聯的 keyTimes 值。值型別：<number>*; 預設值：無；可動畫：否
path: 此屬性使用與 d 屬性相同的語法定義運動路徑。值型別：<string>; 預設值：無；可動畫：否
rotate: 此屬性定義應用於沿路徑動畫的元素的旋轉，通常用於使其指向動畫的方向。值型別：<number>|auto|auto-reverse; 預設值：0; 可動畫：否

注意：對於 <animateMotion>，calcMode 屬性的預設值為 paced。

動畫屬性

動畫時間屬性: begin、dur、end、min、max、restart、repeatCount、repeatDur、fill
動畫值屬性: calcMode、values、keyTimes、keySplines、from、to、by
其他動畫屬性: 最值得注意的是：attributeName、additive、accumulate
動畫事件屬性: 最值得注意的是：onbegin、onend、onrepeat

使用說明

此元素實現了 SVGAnimateMotionElement 介面。

規範

規範
SVG 動畫級別 2 # AnimateMotionElement

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱

<mpath>