使文本动态适应 SVG 中的路径元素

Question

我的 SVG 具有不同尺寸的形状，如下所示，我希望我的文本具有适合其相关形状长度的大小（填充而不溢出）。

我尝试了 font-size-adjust 但没有结果，并且 textLength lengthAdjust 使我的文本变形，我应该使用 textPath 和 href 逻辑吗？

感谢您的帮助

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

这是我想要获得的效果图：

字母之间的空格是我不想使用 textLength 的原因：

我在这里的渲染是：

Answer 1

第一种方法：tou可以设置文本的textLength等于路径的高度。由于您的路径有小费，我选择了 90% 的高度。但是，如果您的路径比文本小得多，则文本将显得拥挤。要理解我的意思，将字体大小更改为 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>

另一种解决方案是在 while 循环中更改字体大小，直到文本长度小于路径的高度。这假设文本的初始长度比高度更长。

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>