SVG <animateMotion> Element (original) (raw)

Last Updated : 31 Mar, 2022

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

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

Syntax:

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:

html `

Output:

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