如何获得 svg 文本元素的严格界限？答案

【问题标题】：How can I get tight bounds of an svg text element?如何获得 svg 文本元素的严格界限？
【发布时间】：2013-03-08 14:51:28
【问题描述】：

我需要 SVG 文本元素的“严格”边界。当我使用getBBox 时，我得到的高度似乎包括字体的全部可能字形高度，而不考虑文本中的特定字符。我得到的宽度因浏览器而异，但通常比字符实际占用的长度多几个单位。有什么办法可以得到一个只包含我文本中的字符的框？

例如，我希望下面创建的矩形将文本“.....”紧紧包裹起来。但是，getBBox 返回的边界框中有很多“剩余”垂直空间。谢谢你的帮助。这是我在 StackOverflow 上的第一篇文章，因此我也欢迎对格式/问题演示文稿提出批评。

<svg width="400" height="400">
        <text>.....</text>
        <rect style="fill:none;stroke:rgb(0,100,100);stroke-width:1"/>
</svg>

<script type="text/javascript">
    var layout = function() {
        var numB = $("text").get(0).getBBox();
        $("rect").attr("x", 0);
        $("rect").attr("y", 0);
        $("rect").attr("width", numB.width);
        $("rect").attr("height", numB.height);
        $("text").attr("y", numB.height);
    }
    
    document.onreadystatechange = function () {
        if (document.readyState == "complete") {
            layout();
        }
    }
</script>

【问题讨论】：

标签： html svg

【解决方案1】：

您的问题是现场的，但答案并不容易。

如果您使用的是 SVG 字体，您可以访问字体文件中的指标。它将具有下降器、上升器、基线、xheight 的指标。所以你可以检查你的字符串是否有任何下降（jgqp 等）、大写字母等。它仍然很棘手，而且并不完全准确。

您可以尝试的第二件事是在画布中呈现相同的文本并检查尺寸。我不知道具体怎么做，应该不会太复杂。

【讨论】：

谢谢。我担心这会不够简单，但我认为值得一问
对于遇到此问题的任何其他人，我可能终于从这个工具中获得了我想要的东西：Font.js。我已经能够在 Verdana 中获得单个字符和字符串的像素完美边界。
正确的 StackOverflow 礼仪是将评论放在答案中，不接受我的回答并接受你的:)
你知道 Font.js 现在是否仍然是最好的方法吗？

【解决方案2】：

对于遇到此问题的其他任何人，我可能最终会从这个工具中获得我想要的东西：Font.js。我已经能够在 Verdana 中获得单个字符和字符串的像素完美边界。

【讨论】：