keyPoints

Атрибут 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

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`keyPoints`	19	79	4	15	6	25	4	14	6	1.5	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyPoints