[SVG] How to write text?

2020-12-09 03:42:02 | Web Design | 1k+ Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/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?

This article was last edited at 2020-12-09 04:20:21