How can i make a svg box dynamic with changeable ?

Question

How can i make a svg rect box dynamic with changeable text ? Like in my code, if the text "Hello" will more than 30 character ?

<svg  version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin     meet"  class="svg-content">
<g>
<rect x="0" y="0" width="100" height="100" stroke-width="5" stroke="#000000"     fill="none"></rect> ?                                                                           
<text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</g>
</svg>

you mean this? http://stackoverflow.com/questions/15500894/background-color-of-text-in-svg/31013492#31013492 — Robert Longson, Mar 26 '17 at 12:18
Now i added code. I want if i place a long text the more than 30 character the rect's height and will adjust with this text. — Sahana Parvin, Mar 26 '17 at 13:55

Francis Hemsher · Answer 1 · 2017-03-26T13:51:40.550

Probably the best approach would be to have the rect preset at specific width. Then create tspans to fill the text element, and dynamically resize the rect height as the characters exceed the preset width. Below is an example:

 <!DOCTYPE HTML>
<html>
<head>
  <title>Wrap Text Rectangle</title>
</head>

<body onload=wrapTextRect()>
Place this text:<br>
<textarea  id="myTextValue" style='width:400px;height:60px;'>
Hello!
</textarea><br>
<button onClick=wrapTextRect()> Wrap text in rect</button>

<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
 <rect id=myRect x=50 y=50 rx=10 ry=10 width=100  fill="#4682b4" stroke='black' stroke-width=5 opacity=.5 />
<text id=myText font-size=14 font-family="arial" fill="white" />
</svg>
</div>
SVG Source:<br>
<textarea id=sourceValue style=width:500px;height:300px></textarea>
<script>
 var NS="http://www.w3.org/2000/svg"
 //---onload and button---
function wrapTextRect()
{
//---clear previous---
for(var k=myText.childNodes.length-1;k>=0;k--)
    myText.removeChild(myText.childNodes.item(k))

var padding=10
var width=+myRect.getAttribute("width")-padding
var x=+myRect.getAttribute("x")
var y=+myRect.getAttribute("y")
var fontSize=+myText.getAttribute("font-size")
var text=myTextValue.value

var words = text.split(' ');
var text_element = document.getElementById('myText');
var tspan_element = document.createElementNS(NS, "tspan");   // Create first tspan element
var text_node = document.createTextNode(words[0]);           // Create text in tspan element
tspan_element.setAttribute("x", x+padding);
tspan_element.setAttribute("y", y+padding+fontSize);
tspan_element.appendChild(text_node);                           // Add tspan element to DOM
text_element.appendChild(tspan_element);                          // Add text to tspan element
//---[EDIT] a single word that exceeds preset rect with---
if(words.length==1)
{
   var len = tspan_element.getComputedTextLength()
   if(len>+myRect.getAttribute("width"))
        myRect.setAttribute("width", len+2*padding)
}
   //---end [EDIT]------------------
for(var i=1; i<words.length; i++)
{
    var len = tspan_element.firstChild.data.length            // Find number of letters in string
    tspan_element.firstChild.data += " " + words[i];            // Add next word

    if (tspan_element.getComputedTextLength() > width-padding)
    {
        tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len);    // Remove added word

        var tspan_element = document.createElementNS(NS, "tspan");       // Create new tspan element
        tspan_element.setAttribute("x",  x+padding);
        tspan_element.setAttribute("dy", fontSize);
        text_node = document.createTextNode(words[i]);
        tspan_element.appendChild(text_node);
        text_element.appendChild(tspan_element);
    }
}

var height = text_element.getBBox().height +2*padding; //-- get height plus padding
myRect.setAttribute('height', height); //-- change rect height
//---show svg source---
sourceValue.value=svgDiv.innerHTML
}
</script>
</body>

</html>

Thank you for your answer. When i place a long text like "Hello! Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!" , it will overflow. But i want if i place this long text the rect's height and will adjust with this text. — Sahana Parvin, Mar 26 '17 at 13:28
@SahanaParvin You must have spacing between words. However,If you just want a single word, then the width of the rect will change. I edited the example and included that feature. — Francis Hemsher, Mar 26 '17 at 13:51
Thank you again. Yes i should add spacing , i just made an example of a long string :). — Sahana Parvin, Mar 26 '17 at 13:59

How can i make a svg box dynamic with changeable ?

1 Answers1