Question

我需要svg文本元素的'紧密'界限。当我使用getBBox时，我得到的高度似乎包括字体的完整可能的字形高度，而不考虑我的文本中的特定字符。我得到的宽度因浏览器而异，但通常比实际占用的字符长几个单位。有没有办法让一个盒子只包含我文本中的字符？

例如，我希望下面创建的rect紧紧包装文本'.....'然而，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>

Answer 1

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

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

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

Answer 2

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

如何获得svg文本元素的紧密边界？

2 个答案: