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:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: 10px;">
GeeksforGeeks
</h1>
<svg viewBox="0 10 500 100"
xmlns="https://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:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: 80px;">
GeeksforGeeks
</h1>
<svg viewBox="0 15 700 200"
xmlns="https://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: