Open In App

SVG keyPoints Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink">
  
        <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" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink">
          
        <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
Previous
Next
Share your thoughts in the comments
Similar Reads