The keySplines
attribute defines a set of Bézier curve control points associated with the keyTimes
list, defining a cubic Bézier function that controls interval pacing.
This attribute is ignored unless the calcMode
attribute is set to spline
.
If there are any errors in the keySplines specification (bad values, too many or too few values), the animation will not occur.
Four elements are using this attribute: <animate>
, <animateColor>
, <animateMotion>
, and <animateTransform>
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>
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.
Specifications
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of 'keySplines' in that specification. |
Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'keySplines' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "svg.elements.animate.keySplines" (depth: 1) to the MDN compatibility data repository.