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必须> =字体大小），那么它不会被切断：https://i.stack.imgur.com/beoee.png

为什么是这样？

Answer 1

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

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