如何使用SVG在文本周围绘制一个框？

Question

我该如何使用SVG创建一个自动调整大小以适应内部文本的框（rect）？

- Asa Ayers

---

参见：https://dev59.com/lHA85IYBdhLWcg3wHvo0 - Has QUIT--Anony-Mousse

那个问题中提到的视口属性与这里的答案无关。 - SSH This

很好的例子，包含bbox https://bl.ocks.org/mbostock/1160929 - marioosh

Answer 1

抱歉回答晚了，我在学习如何使用ECMAScript和XML DOM。

好的。假设您有以下文档结构：

<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 version="1.1"

 width="800"
 height="600"
 id="example_text">

    <g id="layer1">

        <text
         x="123.4"
         y="567.8"
         id="text_holder">

            <tspan id="tspan1">Text</tspan>
            <tspan id="tspan2">More text</tspan>

        </text>
    </g>
    <script type="text/ecmascript">

function create_from_rect (client_rect, offset_px) {
    if (! offset_px) {offset_px=0;}
    var box = document.createElementNS(
        document.rootElement.namespaceURI,
        'rect'
    );

    if (client_rect) {
        box.setAttribute('x', client_rect.left - offset_px);
        box.setAttribute('y', client_rect.top - offset_px);
        box.setAttribute('width', client_rect.width + offset_px * 2);
        box.setAttribute('height', client_rect.height + offset_px * 2);
    }

    return box;
}

function add_bounding_box (text_id, padding) {
    var text_elem = document.getElementById(text_id);
    if (text_elem) {
        var f = text_elem.getClientRects();
        if (f) {
            var bbox = create_from_rect(f[0], padding);
            bbox.setAttribute(
                'style',
                'fill: none;'+
                'stroke: black;'+
                'stroke-width: 0.5px;'
            );
            text_elem.parentNode.appendChild(bbox);
        }
    }
}

add_bounding_box('text_holder', 5);

</script>
</svg>

将<script>标签添加到根<svg>元素底部，使其在创建其上方的DOM结构后执行，就像网页上的JavaScript一样。

- amphetamachine

---

谢谢，我对你的回答印象非常深刻。这比我预期的要花费更多的工作。 - Asa Ayers

我应该补充说明，我在火狐浏览器中尝试过并且成功了，但是在Chrome中无法正常工作。 - amphetamachine

Answer 2

以下方法是否能让事情更简单？

    var text_elem = document.getElementById(text_id);
    var bbox = text_elem.getBBox();

然后使用bbox的宽度和高度绘制矩形？

- JamieJag

---

你能解释一下这会使它更简单吗？我该如何使用你提供的代码？ - Asa Ayers

除非我理解有误，你所要做的就是在文本周围画一个矩形，因此矩形只需要从文本元素的x、y开始绘制，并具有bbox的宽度和高度。我还没有测试过这段代码，但我敢打赌，检查bbox是否为null是不必要的。当我说我的方法会简化事情时，我过于乐观了；它确实会简化，但并不是显著的。 - JamieJag