Open In App

SVG <mpath> Element

Improve
Improve
Like Article
Like
Save
Share
Report

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"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink" >
  
            <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


Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads