在SVG矩形中包裹文本。当用户连续输入文本时，我希望能调整SVG矩形的大小。

Question

我想要一个像下面这样的东西。最初只有一个单词，当用户输入多个单词时，框的大小会增加。我该如何实现这一点？有人有什么想法吗？

- Sharan Ainapurapu

Answer 1

您可以使用http://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getComputedTextLength计算文本的长度，然后调整依赖于textLength的矩形的大小。当onkeydown事件触发时，您可以调用resize函数。

以下是一个示例，当文本长度按间隔更改时，调整矩形的大小。

<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="100" height="100" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)" ></rect>
    <text x="20" y="40">123</text>  
</svg>

<script>
    var textElement = document.getElementsByTagName('text')[0];
    var rectElement = document.getElementsByTagName('rect')[0];

    resizeRect();

    setInterval(resizeRect, 1000);

    function resizeRect(){
        textElement.textContent += 0
        var textLength = textElement.getComputedTextLength();
        rectElement.setAttribute("width", 50 + textLength)
    }

</script>

你可以在这里找到一个代码片段：https://jsfiddle.net/0dvu604g/。

- Roman Alesenkov

---

非常感谢，这正是我在寻找的。我能在某些字符后换行文本吗？ - Sharan Ainapurapu

你可以在这里阅读有关SVG中多行文本的内容：http://www.w3.org/TR/SVG/text.html#Introduction - Roman Alesenkov

谢谢。那很有帮助。 - Sharan Ainapurapu