Pfthb

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>

svgborder:1px solid
.newClassstroke:black; fill:none;
textfill: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>

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

svgborder:1px solid
.newClassstroke:black; fill:none;
textfill: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>

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);

svgborder:1px solid
.newClassstroke:black; fill:none;
textfill: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>