keySplines

例

html,
body,
svg {
  height: 100%;
}

<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 という 4 つの値のセットであり、1 つの時間区分に対するベジェ曲線の制御点を表します。関連付けられた時間区分を定義する keyTimes の値はベジェ曲線の「アンカーポイント」であり、keySplines の値は制御点となります。したがって、制御点のセットの数は、keyTimes の値の数より 1 つ少なくなっていなければなりません。

x1 y1 x2 y2 の各値は、すべて 0 から 1 の範囲内でなければなりません。

Safari の問題

keyTimes の値は、keyTimes="0; 0.25; 0.5; 0.75; 1" のように、前に空白を置かずにセミコロンで区切る必要があります。

仕様書

関連情報

• ベジェ曲線