The <mpath> is the sub element for the <animateMotion> element that provides the ability to reference an external <path> element as the definition of a motion path.
Syntax:
<animateMotion attributes="" > <mpath xlink:href=""/> </animateMotion>
Attributes:
- xlink:href It defines the reference to the path element which defines the motion path.
- core attributes: This includes id, lang, tabindex, xml:base, xml:lang, xml:space as core attributes.
- XLink attributes: This includes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate as XLink attributes.
- externalResourcesRequired attribute: It tells whether the resources that are not part of the current document are required for proper displaying of the given container or not. It has two values as true or false.
Example:
HTML
<!DOCTYPE html> <html>
<body>
<svg width="30%" height="30%" viewBox="0 0 500 300"
<rect x="1" y="1" width="495" height="295"
fill="none" stroke="green" stroke-width="3"/>
<!-- Drawing the outer edge of the motion path in green, along
with three circles at the start, middle and end -->
<path id="geeksforgeeks" d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="green" stroke-width="8.02"/>
<circle cx="100" cy="250" r="18.64" fill="green"/>
<circle cx="250" cy="100" r="18.64" fill="green"/>
<circle cx="400" cy="250" r="18.64" fill="green"/>
<!-- Make a triangle which will be moved about the motion path. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="green" stroke-width="8.02">
<!-- Defining the motion path animation -->
<animateMotion dur="3s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#geeksforgeeks"/>
</animateMotion>
</path>
</svg>
</body>
</html>
|
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome
- Internet Explorer (Not supported)
- Firefox
- Safari
- Opera (Partially supported)
- Edge