關鍵點

**keyPoints** 屬性指示動畫的簡單持續時間。

您可以將此屬性與以下 SVG 元素一起使用

示例

html
<svg
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <path
    d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
    stroke="lightgrey"
    stroke-width="2"
    fill="none"
    id="motionPath" />
  <circle cx="10" cy="110" r="3" fill="lightgrey" />
  <circle cx="110" cy="10" r="3" fill="lightgrey" />

  <circle r="5" fill="red">
    <animateMotion
      dur="3s"
      repeatCount="indefinite"
      keyPoints="0;0.5;1"
      keyTimes="0;0.15;1"
      calcMode="linear">
      <mpath href="#motionPath" />
    </animateMotion>
  </circle>
</svg>

用法說明

值 <number> [; <number>]* ;?
預設值 無
可動畫化 否
<number> [; <number>] ;?

此值定義一個用分號分隔的浮點數列表，這些浮點數在 0 和 1 之間，並指示物件在由相應的 keyTimes 值指定的時刻在運動路徑上移動多遠。距離是沿著由 path 屬性指定的路徑計算的。列表中的每個進度值對應於 keyTimes 屬性列表中的一個值。

如果指定了關鍵點列表，則 keyPoints 列表中的值必須與 keyTimes 列表中的值一樣多。

如果值的末尾有一個分號，可以選擇跟隨空格，則分號和尾隨空格都會被忽略。

如果在值規範中存在任何錯誤（即錯誤的值、過多或過少的值），則這是一個錯誤。

規範

規範
SVG 動畫級別 2
# KeyPointsAttribute

瀏覽器相容性

BCD 表格僅在瀏覽器中載入