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" />
< 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" />
< path d = "M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill = "yellow" stroke = "green" stroke-width = "8.02" >
< 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
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...