Dynamically adapt a text to a path element in an SVG - svg

Question

My SVG has shapes with different dimensions as below, and I would like my text to have a size adapted to the length of its associated shape (fill without overflow).
I tried font-size-adjust but no result and textLength lengthAdjust deforms my text, should i use textPath & href logic ?
Thank you for your help
<svg viewBox="0 0 220 220">
<g>
<path fill="orange" d="M30 110 L 20 110 L 20 20 L 30 10 L 40 20 L 40 110 Z"/>
<text font-size="1em" transform="rotate(-90, 30, 110)" x="30" y="110" dominant-baseline="middle">Object number 1</text>
</g>
<g>
<path fill="red" d="M 50 110 L 40 110 L 40 50 L 50 40 L 60 50 L 60 110 Z"/>
<text transform="rotate(-90, 50, 110)" x="50" y="110" dominant-baseline="middle">Object number 2</text>
</g>
<g>
<path fill="yellow" d="M 80 110 L 60 110 L 60 50 L 80 40 L 100 50 L 100 110 Z"/>
<text transform="rotate(-90, 80, 110)" x="80" y="110" dominant-baseline="middle">Object number 3</text>
</g>
</svg>
This is the rendering I would like to obtain:
The space between letters is why i don't want to use textLength :
My render here would be:

Answer 1

First method: tou can set the textLength of the text to be equal to the height of the path. Since your path has a tip I've opted for the 90% of the height. However if your path is much smaller than the text the text will apear crammed. To understand what I mean change the font-size to 3em
let pthHeight = pth.getBBox().height;
txt.setAttribute("textLength",pthHeight*.9 )
svg{width:50vh}
<svg viewBox="0 0 50 120">
<path fill="orange" id="pth" d="M30 110 L 20 110 L 20 20 L 30 10 L 40 20 L 40 110 Z"/>
<text id="txt" font-size="1em" transform="rotate(-90, 30, 110)" x="30" y="110" dominant-baseline="middle" lengthAdjust="spacingAndGlyphs">Object number 1</text>
</svg>
yet another solution would be changing the font size in a while loop till the text length is smaller than the height of the path. This assumes that the initial length of the text is longet than the height.
let pthHeight = pth.getBBox().height;
function setFontSize(txt){
let fs = txt.getAttribute("font-size");
let textLength = txt.getComputedTextLength();
let fontSize = txt.getAttribute("font-size");
while(textLength > pthHeight){
fontSize -= 1;
txt.setAttribute("font-size",fontSize);
textLength = txt.getComputedTextLength();
}
}
setFontSize(txt)
svg{width:50vh}
<svg viewBox="0 0 50 120">
<path fill="orange" id="pth" d="M30 110 L 20 110 L 20 20 L 30 10 L 40 20 L 40 110 Z"/>
<text id="txt" font-size="16" transform="rotate(-90, 30, 110)" x="30" y="110" dominant-baseline="middle" >Object number 1</text>
</svg>