SVG path attribute
Last Updated :
31 Mar, 2022
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:
Share your thoughts in the comments
Please Login to comment...