<g id="Group" >
<rect class="Class" id="svgID" x="100" y="200.5" width="50" height="40" />
<text class="Text" id="svgTextID" style="pointer-events: inherit;" transform="matrix(0.79122 4 6 7 111.325 414.395)" x="54.565" y="10"> very long text text text text text</text>
</g>
I have a SVG text ,but in some cases cases the text length is greater than rect width so text is getting outside of the rect.I want to adjust the text in the rect by adjusting the text height and width or another option can be to add tspan dynamically in text if text is bigger than rect width.How can i achieve this in javascript.I cant use foreignobject and symbol. and text must also remain perfect in the rect if the page is scrolled or zoomed.