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:
Output:
👁 Image
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome
- Edge
- Firefox
- Safari
- Opera
