keyPoints

Атрибут keyPoints указывает простую длительность анимации.

Этот атрибут можно использовать со следующими SVG-элементами:

• <animate>
• <animateMotion>
• <animateTransform>
• <set>

Пример

<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>] ;?

Это значение задаёт разделённый точками с запятой список чисел с плавающей точкой от 0 до 1 и указывает, насколько далеко по траектории движения должен переместиться объект в момент времени, заданный соответствующим значением keyTimes. Расстояние вычисляется вдоль траектории, указанной атрибутом path. Каждое значение прогресса в списке соответствует значению в списке атрибута keyTimes.

Если задан список ключевых точек, число значений в списке keyPoints должно в точности совпадать с числом значений в списке keyTimes.

Если в конце значения стоит точка с запятой, за которой может следовать пробел, точка с запятой и завершающий пробел игнорируются.

Любые ошибки в задании значения (например, недопустимые значения, слишком много или слишком мало значений) считаются ошибкой.

Спецификации

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