<animateMotion>

Baseline 已廣泛支援

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

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

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

使用語境

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

屬性

關鍵點: 此屬性指示物件在路徑上的進度，範圍為 [0,1]，對應於每個 keyTimes 的關聯值。值型別：<number>*; 預設值：無；可動畫：否
路徑: 此屬性使用與 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

DOM 介面

此元素實現了 SVGAnimateMotionElement 介面。

示例

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>

規範

規範
SVG 動畫級別 2 # AnimateMotionElement

瀏覽器相容性

另見

<mpath>

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年6月6日⁩，由 MDN 貢獻者進行編輯。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤