HTML5 SVG-文本定位

我试图在HTML5SVG中定位

元素，给它一个上边距。比方说，我想让

元素的最大边距为10px。这是行不通的：

<svg style="height: 100px; border: 1px solid black">
    <text fill="#000" x="10" y="10" font-size="50" font-family="Arial">
        <tspan>The quick brown fox jumps over the lazy dog</tspan>
    </text>    
</svg>

至少，我是这么想的。但这也不起作用。现在，上边距太大，正如您在小提琴中看到的：。我希望上边距与左边距相同，但情况显然并非如此。事实上，

y

值为48看起来很正确，但我不知道为什么，也不知道如何计算任意边距和字体大小的值。在我看来，

font size

值不是SVG用于定位的实际文本高度值

有人能帮我吗？我试图用SVG做的事情可能吗

提前谢谢

设置应该为您提供所需的内容，可能是

主基线=“悬挂”

，以便文本位置基于文本顶部而不是基线

---

如果你想知道字体有多高，那么你应该调用来确定它，而不是假设你得到的字体大小正是你想要的。

你也可以在

y

和

dy

属性中使用

em

这至少解决了我的问题：

工作：以y值表示的余量：

敏捷的棕色狐狸跳过了懒狗

主导基线：悬挂文本{主要基线：边缘之前的文本；}我喜欢这个解决方案，但是我发现Safari还不支持它。
<svg style="height: 100px; border: 1px solid black">
    <text fill="#000" x="10" y="60" font-size="50" font-family="Arial">
        <tspan>The quick brown fox jumps over the lazy dog</tspan>
    </text>    
</svg>