Copyright notice: This article is an original article and follows
CC 4.0 BY-NC-ND
Copyright agreement. If you want to reprint this article, please attach the original source link and this statement.
Source link:
https://www.v2know.com/MainPage/PreView/548
Previous: [SVG] How to draw a straight line?
Code:
<svg >
<text x="0" y="15" fill="red" style="font-size:20px">I love SVG</text>
</svg>
Result:
The default value of the font size is 16px, I set 20px specially here;
"x" and "y" are coordinate values. Note that its coordinates are not relative to svg.
You can try to reduce the value of 15 to 10 to see what happens. I'll just show it to you:
Code:
<svg>
<text x="0" y="10" fill="red" style="font-size:20px">I love SVG</text>
</svg>
Result:
You see that the text display is not complete, and the above part is not in the svg so it cannot be displayed. This is the importance of x and y. You must clearly define the position of your text so that it can be displayed correctly and completely.
Next: [SVG] What is SVG path?