keySplines

  • Revision slug: SVG/Attribute/keySplines
  • Revision title: keySplines
  • Revision id: 58801
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 185 words added

Revision Content

« SVG Attribute reference home

The keySplines attribute define a set of Bézier control points associated with the {{ SVGAttr("keyTimes") }} list, defining a cubic Bézier function that controls interval pacing. The attribute value is a semicolon-separated list of control point descriptions. Each control point description is a set of four values: x1 y1 x2 y2, describing the Bézier control points for one time segment. The {{ SVGAttr("keyTimes") }} values that define the associated segment are the Bézier "anchor points", and the keySplines values are the control points. Thus, there must be one fewer sets of control points than there are {{ SVGAttr("keyTimes") }}.

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

This attribute is ignored unless the {{ SVGAttr("calcMode") }} 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.

Usage context

Categories Animation value attribute
Value <list>
Animatable No
Normative document SVG 1.1 (2nd Edition)

Example

Elements

The following elements can use the keySplines attribute

  • {{ SVGElement("animate") }}
  • {{ SVGElement("animateColor") }}
  • {{ SVGElement("animateMotion") }}
  • {{ SVGElement("animateTransform") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The keySplines attribute define a set of Bézier control points associated with the {{ SVGAttr("keyTimes") }} list, defining a cubic Bézier function that controls interval pacing. The attribute value is a semicolon-separated list of control point descriptions. Each control point description is a set of four values: <code>x1 y1 x2 y2</code>, describing the Bézier control points for one time segment. The {{ SVGAttr("keyTimes") }} values that define the associated segment are the Bézier "anchor points", and the <code>keySplines</code> values are the control points. Thus, there must be one fewer sets of control points than there are {{ SVGAttr("keyTimes") }}.<br> <br> The values of <code>x1 y1 x2 y2</code> must all be in the range 0 to 1.<br> <br> This attribute is ignored unless the {{ SVGAttr("calcMode") }} is set to <code>spline</code>.<br> <br> If there are any errors in the keySplines specification (bad values, too many or too few values), the animation will not occur.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Animation value attribute</td> </tr> <tr> <th scope="row">Value</th> <td>&lt;list&gt;</td> </tr> <tr> <th scope="row">Animatable</th> <td>No</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#KeySplinesAttribute" title="http://www.w3.org/TR/SVG11/animate.html#KeySplinesAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>keySplines</code> attribute</p>
<ul> <li>{{ SVGElement("animate") }}</li> <li>{{ SVGElement("animateColor") }}</li> <li>{{ SVGElement("animateMotion") }}</li> <li>{{ SVGElement("animateTransform") }}</li>
</ul>
Revert to this revision