結束

end 屬性定義動畫的結束值，該值可以約束活動持續時間。

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

用法說明

預設值	無
值	`<end-value-list>`
可動畫化	否

<end-value-list> 是一個用分號分隔的值列表。每個值可以是以下之一

<offset-value>

此值定義一個時鐘值，該值表示相對於 SVG 文件開頭的時間點（通常是load 或DOMContentLoaded 事件）。負值有效。

<syncbase-value>

此值定義一個syncbase以及來自該syncbase的可選偏移量。元素的動畫結束時間相對於另一個動畫的開始或活動結束時間定義。

有效的 syncbase-value 包含對另一個動畫元素的 ID 引用，後跟一個點，以及begin或end來標識是與引用的動畫元素的開始還是活動結束同步。可以附加一個在<offset-value>中定義的可選偏移值。

<event-value>

此值定義一個事件以及一個可選的偏移量，該偏移量確定元素動畫應結束的時間。動畫結束時間相對於指定事件觸發的時間定義。

有效的 event-value 包含一個元素 ID，後跟一個點以及該元素支援的事件之一。所有有效的事件（並非所有元素都支援）由 DOM 和 HTML 規範定義。這些是

可以附加一個在<offset-value>中定義的可選偏移值。

<repeat-value>

此值定義一個限定的重複事件。元素動畫結束時間相對於具有指定迭代值的重複事件引發的時間定義。

有效的重複值包含一個元素 ID，後跟一個點以及函式repeat()，該函式的引數是指定重複次數的整數值。可以附加一個在<offset-value>中定義的可選偏移值。

<accessKey-value>

此值定義一個應觸發動畫結束的訪問鍵。當用戶按下指定的鍵時，元素動畫將結束。

有效的 accessKey-value 包含函式accessKey()，其引數是要輸入的字元。可以附加一個在<offset-value>中定義的可選偏移值。

<wallclock-sync-value>

此值將動畫結束時間定義為現實世界中的時鐘時間。

有效的 wallclock-sync-value 包含函式wallclock()，其引數是時間值。時間語法基於ISO 8601中定義的語法。

indefinite

動畫的結束將由SVGAnimationElement.endElement() 方法呼叫確定。

示例

偏移量示例

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="100"
      begin="0s"
      end="8s"
      fill="freeze" />
  </rect>

  <rect x="10" y="60" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="75"
      begin="0s"
      end="6s"
      fill="freeze" />
  </rect>

  <rect x="10" y="85" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="50"
      begin="0s"
      end="4s"
      fill="freeze" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>

事件示例

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="0s"
      end="endButton.click"
      dur="8s"
      repeatCount="indefinite"
      fill="freeze" />
  </rect>

  <!-- trigger -->
  <rect
    id="endButton"
    style="cursor:pointer;"
    x="19.5"
    y="62.5"
    rx="5"
    height="25"
    width="80"
    fill="#EFEFEF"
    stroke="black"
    stroke-width="1" />

  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Click me.
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

訪問鍵示例

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="0s"
      end="accessKey(e)"
      dur="8s"
      repeatCount="indefinite"
      fill="freeze" />
  </rect>

  <!-- trigger -->
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Hit the "s" key
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

此示例嵌入在 iframe 中。如果要啟用鍵事件，則必須先單擊它。

規範

規範
SVG 動畫級別 2 # EndAttribute