SVG <mpath> Element

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:

Output:

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

• Chrome
• Internet Explorer (Not supported)
• Firefox
• Safari
• Opera (Partially supported)
• Edge