Skip to content
Related Articles

Related Articles

SVG keyPoints Attribute
  • Last Updated : 16 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :