如何更改SVG的高度和宽度 <text> ，如果大于svg的高度和宽度 <rect> 在JavaScript中？

Question

    <g id="newGroup" >
        <rect class="newClass" id="svg_106"  x="133.2" y="384.5" width="76.2" height="38.1" />
        <text class="newText" id="svg_110" style="pointer-events: inherit;" transform="matrix(0.7912 0 0 1 111.325 414.395)" x="31.5976" y="-12">This is a very long text text text text text</text>
    </g>

I want to adjust the text inside a rect.Some text are greater in width than the width of rect itself.I want to adjust the text so that it properly fits inside the rect.

Answer 1

The transform on the <text> element complicates things a little.

What I would do is remove the transform, then measure the size of the text. Then you can give it a new transform that scales it appropriately and positions it in the correct place.

 adjustText("svg_106", "svg_110"); function adjustText(rectId, textId) { var rectElem = document.getElementById(rectId); var textElem = document.getElementById(textId); // Get the rectangle bounds var rectBBox = rectElem.getBBox(); // Clear the text position and transform so we can measure the text bounds properly textElem.setAttribute("x", "0"); textElem.setAttribute("y", "0"); textElem.removeAttribute("transform"); var textBBox = textElem.getBBox(); // Calculate an adjusted position and scale for the text var padding = 5; // How much horizontal padding between the text and the rectangle sides var scale = (rectBBox.width - 2 * padding) / textBBox.width; var textX = rectBBox.x + padding; var textY = rectBBox.y + (rectBBox.height / 2) - scale * (textBBox.y + textBBox.height / 2); // Add a new transform attribute to the text to position it in the new place with the new scale textElem.setAttribute("transform", "translate("+textX+","+textY+") scale("+scale+")"); } 

 .newClass { fill: grey; } 

 <svg viewBox="0 300 500 200"> <g id="newGroup" > <rect class="newClass" id="svg_106" x="133.2" y="384.5" width="76.2" height="38.1" /> <text class="newText" id="svg_110" style="pointer-events: inherit;" transform="matrix(0.7912 0 0 1 111.325 414.395)" x="31.5976" y="-12">This is a very long text text text text text</text> </g> </svg> 

Answer 2

You don't need javascript for this. I'm putting the text in a <symbol> and adapt the symbol to the size of the rect. However you may use javascript to calculate the viewBox for the <symbol> element.

 svg{border:1px solid} .newClass{stroke:black; fill:none;} text{fill:black;} 

 <svg viewBox="130 380 100 50"> <symbol id="test" viewBox="0 0 260 19"> <g id="g"> <text class="newText" id="svg_110" dominant-baseline="hanging" >This is a very long text text text text text</text> </g> </symbol> <g id="newGroup" > <rect class="newClass" id="svg_106" x="133.2" y="384.5" width="76.2" height="38.1" /> <use xlink:href="#test" style="pointer-events: inherit;" x="133.2" y="384.5" width="76.2" height="38.1" /> </g> </svg> 

In this example I'm showing how to calculate the value for the <symbol> viewBox attribute using javascript.

 let bbText = svg_110.getBBox(); test.setAttributeNS(null, "viewBox", `${bbText.x} ${bbText.y} ${bbText.width} ${bbText.height}`) 

 svg{border:1px solid} .newClass{stroke:black; fill:none;} text{fill:black;} 

 <svg viewBox="130 380 100 50"> <symbol id="test"> <text class="newText" id="svg_110" dominant-baseline="hanging" > This is a very long text text text text text </text> </symbol> <g id="newGroup" > <rect class="newClass" id="svg_106" x="133.2" y="384.5" width="76.2" height="38.1" /> <use xlink:href="#test" style="pointer-events: inherit;" x="133.2" y="384.5" width="76.2" height="38.1" /> </g> </svg> 

UPDATE

The OP is commenting that she/he isn't able to change the SVG but can add elements dynamically. In the next example I'm creating the <symbol> and the <use> elements dynamically. Please reed the comments in my code.

 const SVG_NS = 'http://www.w3.org/2000/svg'; const SVG_XLINK = "http://www.w3.org/1999/xlink"; let theText = document.querySelector("#svg_110"); let theRect = document.querySelector("#svg_106"); // create a new symbol element let symbol = document.createElementNS(SVG_NS, 'symbol'); symbol.setAttributeNS(null, "id", "theSymbol"); newGroup.appendChild(symbol); // get the size of the bounding box for the text let bbText = theText.getBBox(); // set the attribute viewBox for the symbol symbol.setAttributeNS(null, "viewBox", `${bbText.x} ${bbText.y} ${bbText.width} ${bbText.height}`) // clone the text and append it to the symbol let txt=theText.cloneNode(true); symbol.appendChild(txt); // remove the text theText.parentNode.removeChild(theText); // create a use element let use = document.createElementNS(SVG_NS, 'use'); // the use element is using the symbol use.setAttributeNS(SVG_XLINK, 'xlink:href', '#theSymbol'); // also is using the rect's attributes use.setAttributeNS(null, 'x', theRect.getAttribute("x")); use.setAttributeNS(null, 'y', theRect.getAttribute("y")); use.setAttributeNS(null, 'width', theRect.getAttribute("width")); use.setAttributeNS(null, 'height', theRect.getAttribute("height")); newGroup.appendChild(use); 

 svg{border:1px solid} .newClass{stroke:black; fill:none;} text{fill:black;} 

 <svg viewBox="130 380 150 100"> <g id="newGroup" > <rect class="newClass" id="svg_106" x="133.2" y="384.5" width="76.2" height="38.1" /> <text class="newText" id="svg_110" style="pointer-events: inherit;" x="31.5976" y="-12">This is a very long text text text text text</text> </g> </svg> 

Answer 3

Just do this in JavaScript:

var rect = document.getElementById("svg_106");
var text = document.getElementById("svg_110");
var aRect = rect.getBoundingClientRect();
var bRect = text.getBoundingClientRect();

if (aRect.top + aRect.height) < (bRect.top)) ||
    (aRect.top > (bRect.top + bRect.height)) ||
    ((aRect.left + aRect.width) < bRect.left) ||
    (aRect.left > (bRect.left + bRect.width) {
        //Do stuff
}