4

我需要 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>
4

2 回答 2

3

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

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

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

于 2013-03-08T20:03:51.323 回答
3

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

于 2013-03-10T02:18:50.550 回答