Why svg text disappears when setting x and y to 0?
html, javascript, svg, w3c
Solution
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.
Problem
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> ```