Javascript 为什么将x和y设置为0时svg文本消失？

我刚刚开始阅读关于svg的文章，我提出了以下问题

我正在创建一个简单的

svg

，里面有一个

text

，如下所示

通过阅读，我了解到

text

标记的

x

和

y

声明了

svg

空间中文本的位置

为什么当我将

x

和

y

都设置为

0

时，文本不会显示，例如，当我将

x

和

y

更改为

10

时，文本会显示？

x=0

和

y=0

是否表示svg标记的左上角

谢谢

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

你好

没错，

（0,0）

确实是SVG区域的左上角（至少在开始变换坐标之前）

但是，文本元素

hello

的基线最左端位于

（0,0）

，这意味着文本将完全显示在SVG图像的顶部

尝试以下操作：将文本标记更改为“再见”。现在，您应该能够在SVG的顶部看到“g”和“y”的降序部分

如果提供的y坐标等于行高，则可以将文本下移一行，例如：

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

你好

要使

的行为更加标准，您可以使用

主导基线：悬挂

，如下所示：

Hello

---

您可以看到此属性的不同值的示例。

这些小问题占用了我的时间：）现在很清楚了。谢谢