SVG path attribute

Last Updated : 25 Jul, 2024

The path attribute defines a text path or the motion path along with the characters of a text are displayed or a referenced element is animated respectively. The elements that are using this attribute includes: <animateMotion> and <textPath>.

Syntax:

path = path-data

Attribute Values: The path attribute accepts the values mentioned above and described below

path-data: It has two different value i.e. it can either define a text path or the motion path along with the glyphs are to be rendered or animated respectively.

Note: Its default value is considered as normal.

Below examples illustrate the use of path attribute.

Example 1:

HTML

<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green; 
            margin-left: 10px;">
        GeeksforGeeks
    </h1>

    <svg viewBox="0 10 500 100" 
        xmlns="http://www.w3.org/2000/svg">
        
        <path fill="green" 
            d = "M10, 90 Q90, 90 90, 45 Q90,
                10 50, 10 Q10, 10 10, 40 Q10,
                70 45, 70 Q70, 70 75, 50" />

        <text>
            <textPath 
                path = "M10, 90 Q90, 90 90,
                        45 Q90, 10 50, 10 Q10,
                        10 10, 40 Q10, 70 45,
                        70 Q70, 70 75, 50">
                It is a Compute Science Portal
            </textPath>
        </text>
    </svg>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green; 
            margin-left: 80px;">
        GeeksforGeeks
    </h1>

    <svg viewBox="0 15 700 200" 
        xmlns="http://www.w3.org/2000/svg">

        <path fill="none" stroke="green" 
            d = "M 100, 100 m -75, 0 a 75,
                75 0 1, 0 150, 0 a 75, 75 
                0 1, 0 -150, 0" />

        <circle r="5" fill="green">
            <animateMotion dur="5s" 
                repeatCount="indefinite" 
                path="M 100, 100 m -75, 0 a 
                75, 75 0 1, 0 150, 0 a 75, 
                75 0 1, 0 -150,0" />
        </circle>
    </svg>
</body>

</html>

Output:

SVG pathLength Attribute

thacker_shahid

Improve

Article Tags :

SVG path attribute

Similar Reads

SVG Elements

SVG Properties

SVG Attributes

Thank You!

What kind of Experience do you want to share?