Related Articles

Related Articles

SVG <animateMotion> element
  • Last Updated : 01 Oct, 2020

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The SVG <animateMotion> element let define how an element moves along a motion path.

Syntax:

<animateMotion values="" dur="" repeatCount="" path="" />

Attributes:

  • keyPoints: This attribute indicates in the range [0, 1], how far is the object along the path for each keyTimes associated values.
  • path: This attribute defines the path of the motion.
  • rotate: This attribute defines a rotation applied to the element animated along a path, usually to make it point in the direction of the animation.
  • Animation Attributes: Attributes used to give animation effects, exp timing attributes, event attributes, and value attributes, etc.
  • Global Attributes: some global attributes used like core attributes and styling attributes, etc.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <svg width="1200" height="1200">
        <circle cx="60" cy="60" r="5" fill="green">
            <animateMotion dur="10s" repeatCount="indefinite"
          path="M20, 60 C20,
                -50 180, 150 180,
                 60 C180-60 20,
                 150 20, 60 z" />
        </circle>
    </svg>
</body>
  
</html>

chevron_right


Output:

Browsers Supported: The following browsers are supported by this SVG element:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :