关键点

**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 表格仅在浏览器中加载