Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!
U kunt het artikel ook in het English (US) lezen.

The keyPoints attribute indicates the simple duration of an animation.

Five elements are using this attribute: <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>

<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 the path attribute. Each progress value in the list corresponds to a value in the keyTimes attribute list.

If a list of key points is specified, there must be exactly as many values in the keyPoints list as in the keyTimes 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
keyPointsChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

No support  
No support
Compatibility unknown  
Compatibility unknown

Documentlabels en -medewerkers

Labels: 
Aan deze pagina hebben bijgedragen: Sebastianz
Laatst bijgewerkt door: Sebastianz,