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