在SVG矩形内换行文字。我想在用户试图连续输入文本时调整svg矩形的大小

Question

我想要类似下面的内容。最初，当用户输入多个单词时，会增加一个单词。我怎样才能做到这一点？任何人有任何想法如何进行此？

Answer 1

你可以计算使用http://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getComputedTextLength 文本的长度，然后你可以调整依赖于正文长度的矩形。当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/