动态调整文本以适应 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>