The keyPoints
attribute indicates the simple duration of an animation.
Five elements are using this attribute: <animate>
, <animateColor>
, <animateMotion>
, <animateTransform>
, and <set>
html, body, svg { height: 100%; }
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionPath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animateMotion dur="3s" repeatCount="indefinite" keyPoints="0;0.5;1" keyTimes="0;0.15;1" calcMode="linear"> <mpath xlink:href="#motionPath"/> </animateMotion> </circle> </svg>
Usage notes
Value | <number> [; <number> ]* ;? |
---|---|
Default value | None |
Animatable | No |
<number> [; <number>] ;?
- This value defines a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path the object shall move at the moment in time specified by corresponding
keyTimes
value. The distance is calculated along the path specified by thepath
attribute. Each progress value in the list corresponds to a value in thekeyTimes
attribute list.If a list of key points is specified, there must be exactly as many values in the
keyPoints
list as in thekeyTimes
list.If there's a semicolon at the end of the value, optionally followed by white space, both the semicolon and the trailing white space are ignored.
If there are any errors in the value specification (i.e. bad values, too many or too few values), then thatΚΌs an error.
Specifications
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of 'keyPoints' in that specification. |
Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'keyPoints' 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
keyPoints | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- No support
- No support
- Compatibility unknown
- Compatibility unknown