keySplines

Атрибут keySplines определяет набор управляющих точек кривой Безье, связанных со списком keyTimes, задавая кубическую функцию Безье, которая управляет темпом интервала.

Этот атрибут игнорируется, если для атрибута calcMode не задано значение spline.

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

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

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

Пример

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
      attributeName="cx"
      dur="4s"
      calcMode="spline"
      repeatCount="indefinite"
      values="60; 110; 60; 10; 60"
      keyTimes="0; 0.25; 0.5; 0.75; 1"
      keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
    <animate
      attributeName="cy"
      dur="4s"
      calcMode="spline"
      repeatCount="indefinite"
      values="10; 60; 110; 60; 10"
      keyTimes="0; 0.25; 0.5; 0.75; 1"
      keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
  </circle>
</svg>

Примечания по использованию

Значение атрибута представляет собой список описаний управляющих точек, разделённых точкой с запятой.

<control-point>

Каждое описание управляющих точек состоит из четырёх значений: x1 y1 x2 y2, описывающих управляющие точки кривой Безье для одного временного сегмента. Значения keyTimes, задающие соответствующий сегмент, являются «опорными точками» кривой Безье, а значения keySplines — управляющими точками. Таким образом, наборов управляющих точек должно быть на один меньше, чем значений keyTimes.

Все значения x1 y1 x2 y2 должны находиться в диапазоне от 0 до 1.

Проблемы в Safari

Значения keyTimes следует разделять точкой с запятой без пробела перед ней, например: keyTimes="0; 0.25; 0.5; 0.75; 1"

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

См. также

• кривая Безье