Skip to content
Related Articles

Related Articles

Improve Article
SVG path attribute
  • Last Updated : 18 Nov, 2020

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :