keySplines

ThekeySplines attribute defines a set ofBézier curve control points associated with thekeyTimes list, defining a cubic Bézier function that controls interval pacing.

This attribute is ignored unless thecalcMode attribute is set tospline.

If there are any errors in the keySplines specification (bad values, too many or too few values), the animation will not occur.

You can use this attribute with the following SVG elements:

Example

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

html

<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>

Usage notes

Value	`<control-point>` [`;<control-point>` ]*`;`?
Default value	None
Animatable	No

The attribute value is a semicolon-separated list of control point descriptions.

<control-point>

Each control point description is a set of four values:x1 y1 x2 y2, describing the Bézier control points for one time segment. ThekeyTimes values that define the associated segment are the Bézier "anchor points", and thekeySplines values are the control points. Thus, there must be one fewer sets of control points than there arekeyTimes.

The values ofx1 y1 x2 y2 must all be in the range 0 to 1.

Safari issues

keyTimes values should be separated with semicolon without space before, f.e:keyTimes="0; 0.25; 0.5; 0.75; 1"