SVG text Element
Last Updated :
31 Mar, 2022
The SVG <text> element is used to draw text. There are some attributes to customize the text.
Syntax:
<text
x="x-coordinates"
y="y-coordinates"
dx="list of lengths"
dy="list of lengths"
rotate="list of numbers"
textlength="length"
lengthAdjust="spacing" >
</text>
Attribute:
- x: x axis coordinates of glyphs.
- y: y axis coordinates of glyphs.
- dx: shift along with x-axis.
- dy: shift along with y-axis.
- rotate: rotation of glyphs.
- textlength: render text’s length.
- lengthAdjust: adjustments with the rendered length.
Example:
html
< html >
< title >SVG Text</ title >
< body >
< svg width = "400" height = "400" >
< text x = "40" y = "40" fill = "green" >
GeeksforGeeks
</ text >
</ svg >
</ body >
</ html >
|
Output:
Example: Rotated multiline text.
html
< html >
< title >SVG Text</ title >
< body >
< svg width = "400" height = "400" >
< text x = "10" y = "10" fill = "green"
transform = "rotate(30 20, 40)" >
GeeksforGeeks</ text >
< text x = "40" y = "40" fill = "green"
transform = "rotate(90 10, 60)" >
GeeksforGeeks</ text >
</ svg >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...