The keyPoints attribute specifies the duration of an animation. The elements that are using this attribute includes: <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>.
Syntax:
keyPoints = [;<number>]*
Attribute Values: The keyPoints attribute accepts the values mentioned above and described below
- [;<number>]*: It is a list of numbers between 0 and 1 separated by semi-colon.
Note: The default value for the keyPoints attribute is none
Below Examples illustrates the use of keyPoints attribute.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style = "color: green; margin-left: 35px;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "-50 0 1020 120"
< path d = "M 10 10 H 90 V 90 H 10 L 10 10"
stroke = "green" fill = "none" id = "geek" />
< circle r = "3" fill = "green" >
< animateMotion dur = "3s"
repeatCount = "indefinite"
keyPoints = "0;0.5;1"
keyTimes = "0;0.15;1"
calcMode = "linear" >
< mpath xlink:href = "#geek" />
</ animateMotion >
</ circle >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style = "color: green; margin-left: 35px;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "-30 40 1020 120"
< path d = "M50,50 Q50,100 100,100"
stroke = "green" fill = "none" id = "geek" />
< circle r = "5" fill = "green" >
< animateMotion dur = "3s"
repeatCount = "indefinite"
keyPoints = "0;0.5;1"
keyTimes = "0;0.15;1"
calcMode = "linear" >
< mpath xlink:href = "#geek" />
</ animateMotion >
</ circle >
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...