.png)
SVG path attribute
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" <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" <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:
.png)
