I just started reading about svg and I came up with the following question

I am creating a simple svg with a text inside as shown below.

From my reading I understood that x and y of the text tag declares the position of the text inside the svg space.

Why when I set both x and y to 0 the text does not appear and when I change x and y to 10 for example it is displayed? Isn't x=0 and y=0 meaning the top left corner of the svg tag?

Thanks

<svg width="200" height="100">
   <text x="0" y="0">hello</text>
</svg>

I just started reading about svg and I came up with the following question

I am creating a simple svg with a text inside as shown below.

From my reading I understood that x and y of the text tag declares the position of the text inside the svg space.

Why when I set both x and y to 0 the text does not appear and when I change x and y to 10 for example it is displayed? Isn't x=0 and y=0 meaning the top left corner of the svg tag?

Thanks

<svg width="200" height="100">
   <text x="0" y="0">hello</text>
</svg>

• javascript
• html
• svg
• w3c

2 Answers 2

You're correct, (0,0) is indeed the top left corner of the SVG area (at least before you start transforming the coordinates).

However, your text element <text x="0" y="0">hello</text> is positioned with the leftmost end of its baseline at (0,0), which means the text will appear entirely off the top of the SVG image.

Try this: change your text tag to <text x="0" y="0">goodbye</text>. You should now be able to see the descending parts of the 'g' and 'y' at the top of your SVG.

You can shift your text down by one line if you provide a y coordinate equal to the line height, for example:

<svg width="200" height="100">
   <text x="0" y="1em">hello</text>
</svg>

Here's a JSFiddle link for you to play with.

To make <text> behave in a more standard way, you can use dominant-baseline: hanging like so:

<text x="0" style="dominant-baseline: hanging;">Hello</text>

You can see examples of different values of this property here.