end - SVG | MDN - MDN 文档

用法说明

默认值	None
值	`<end-value-list>`
可动画的	否

<end-value-list> 是一个以分号分隔的值列表。每个值可以是以下之一：

<offset-value>

此值定义了一个时钟值，表示相对于 SVG 文档开始时间的某个时间点（通常是 load 或 DOMContentLoaded 事件）。负值也是有效的。

<syncbase-value>

此值定义了一个同步基准以及与该同步基准可选的偏移量。元素的动画结束时间相对于另一个动画的开始或活动结束时间来定义。

有效的 syncbase-value 由另一个动画元素的 ID 引用组成，后跟一个点，然后是 begin 或 end，以识别是与引用的动画元素的开始同步还是与活动结束同步。可以附加 <offset-value> 中定义的可选偏移量。

<event-value>

此值定义了一个事件以及一个可选的偏移量，用于确定元素动画应结束的时间。动画结束时间相对于指定事件触发的时间来定义。

有效的 event-value 由一个元素 ID 组成，后跟一个点，然后是该元素支持的事件之一。所有有效事件（不一定所有元素都支持）均由 DOM 和 HTML 规范定义。它们是：

可以附加 <offset-value> 中定义的可选偏移量。

<repeat-value>

此值定义了一个限定的重复事件。元素动画结束时间相对于具有指定迭代值的重复事件引发的时间来定义。

有效的 repeat 值由一个元素 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"
    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" 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" 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

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年7月1日⁩，由 MDN contributors 贡献。

在 GitHub 上查看此页面 • 报告此内容的错误