SVG文本切断

Question

当我有这样一个简单的svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text style="font-size: 24px;">Sample Title</text>
    <text style="font-size: 12px;">Sample Subtitle</text>
</svg>

这些单词被剪切掉，好像它像这样延伸到视口的顶部：https://i.stack.imgur.com/fAN4Z.png

如果我将y =“24”添加到标题文本标签，y =“36”添加到字幕文本标签（其中y必须是＆gt; =字体大小），那么它不会被切断：{{ 3}}

为什么会这样？

Answer 1

如果您不包含y属性，则默认为0.如果您绘制的位置为0的文本，则其基线位于图像的顶部，您可以我只会看到挂在基线下面的字母。

SVG主要是用于描述图形的语言，因此所有元素都是（x，y）坐标的位置，而不是HTML，它是标记语言，因此文本流动更自然。