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?