SVG <mpath> Element (original) (raw)

Last Updated : 23 Jul, 2025

The _ is the sub element for the _ element that provides the ability to reference an external element as the definition of a motion path.

**Syntax:

**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 `

<body> 

    <svg width="30%" height="30%"  viewBox="0 0 500 300"
         xmlns="https://www.w3.org/2000/svg"
         xmlns:xlink="https://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>

**Output:

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

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