Question

我刚刚开始阅读svg，我提出了以下问题

我正在创建一个内置svg的简单text，如下所示。

从我的阅读中我了解到x标记的y和text声明了svg空间内文本的位置。

为什么当我同时将x和y设置为0时，文本未显示以及我将x和y更改为{{1}时例如它显示？ 10和x=0是不是意味着svg标记的左上角？

由于

y=0

Answer 1

你是对的，(0,0)确实是SVG区域的左上角（至少在开始变换坐标之前）。

但是，您的文本元素<text x="0" y="0">hello</text>的基线最左端位于(0,0)，这意味着文本将完全显示在SVG图像的顶部。

尝试此操作：将文字标记更改为<text x="0" y="0">goodbye</text>。您现在应该能够看到SVG顶部的'g'和'y'的下降部分。

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

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

Answer 2

要使<text>以更标准的方式行事，您可以使用dominant-baseline: hanging，如下所示：

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

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