在 SVG 矩形内环绕文本。当用户尝试连续输入文本时，我想调整 svg 矩形的大小

Question

我想要下面这样的东西。最初只有一个单词，当用户输入多个单词时，框的大小会增加。我怎样才能做到这一点？有人知道如何进行吗？

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>

您可以在此处找到 fiddle：https://jsfiddle.net/0dvu604g/

在 SVG 矩形内环绕文本。当用户尝试连续输入文本时，我想调整 svg 矩形的大小

Wrap text inside SVG rectangle. I want to resize the svg rectangle when user tries to enter the text continuously

svg

image-resizing