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

Question

我想要下面的内容。当用户输入框大小增加的多个单词时，最初会有一个单词。我怎样才能做到这一点？任何人都知道如何继续这个？

Answer 1

您可以使用http://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getComputedTextLength计算文字的长度 然后你可以调整取决于textLength的rect的大小。你可以在onkeydown事件触发时调用resize函数。

以下是当文本长度按间隔更改时调整rect的大小的示例。

<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/