将x和y设置为0时为什么svg文本会消失？ [英] Why svg text disappears when setting x and y to 0?

问题描述

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

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

我正在创建一个简单的 svg 内有文本，如下所示。

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

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

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

为什么我将 x 和 y 设置为 0 文本没有出现，当我更改 x 和 y 到 10 例如显示？不是 x = 0 和 y = 0 意味着svg标签的左上角？

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?

谢谢

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

推荐答案

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

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

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

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.

试试这个：更改你的文本标记为< text x =0y =0> goodbye< / text> 。您现在应该能够看到SVG顶部的'g'和'y'的下降部分。

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.

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

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>

这是一个JSFiddle链接供您玩。

这篇关于将x和y设置为0时为什么svg文本会消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！