在SVG中居中对齐不同高度的垂直动态多行文本

如何解决在SVG中居中对齐不同高度的垂直动态多行文本

我一直在尝试解决这个问题，文本将是动态的，但通常超过两行，我会自己分解成标签，但是它们的宽度会有所不同，因为每行的副本可能不同。我需要每条线的宽度相等，但问题是使两条线垂直居中且线高正确。

我有一个代码笔来说明我到目前为止所做的事情。问题是我不想使用 dy 属性，除非在需要时有一种准确的方法可以在 JS 中更改它。任何帮助深表感谢。

https://codepen.io/basswow/pen/wvobNWL

let rnd = document.querySelectorAll("text");
rnd.forEach((txt,idx) => {
  let txtlength = txt.getBoundingClientRect().width;
  let w = txt.parentNode.getBoundingClientRect().width;
  let scale = w / (2 * txtlength);
  txt.setAttributeNS(
    null,"transform",`scale(${scale},${scale}) translate(${50 / scale},${
     50/scale
    })`
  );
});

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');
svg {
width: 50%;
font-family: "Open Sans,sans-serif";
  font-weight: 800;
}

text {
  font-size: 10;
  dominant-baseline: middle;
  text-anchor: middle;
}

<svg viewBox="0 0 100 100">
  <circle stroke="#333" stroke-width="3" fill="white" cx="50" cy="50" r="45"></circle>
  <circle stroke="#999" stroke-width="3" fill="transparent" cx="50" cy="50" r="42"></circle>
  <text id="txt" font-family="sans-serif" dominant-baseline="middle" text-anchor="middle">Online Special</text>
  <text id="txt" font-family="sans-serif" dominant-baseline="middle" text-anchor="middle">Only</text>
</svg>

编辑： 我想出了其他类似的东西，但它仅限于两行。

let rnd = document.querySelectorAll("text");
rnd.forEach((txt,idx) => {
  let txtlength = txt.getBoundingClientRect().width;
  let w = txt.parentNode.getBoundingClientRect().width;
  let scale = w / (2 * txtlength);
  let fs = window.getComputedStyle(txt).fontSize;
  let newFs = parseInt(parseInt(fs) * scale * 0.95);
  txt.style.fontSize = `${newFs}px`; 
  txt.setAttributeNS(null,`translate(0,${idx === 0 ? 0 - newFs/2 : 0 + newFs/2})`);
 console.log(fs,newFs+'px');
});

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');
svg {
width: 500px;

  font-weight: 800;
}

text {
  font-family: "Open Sans";
  letter-spacing: 0;
  font-size:10px;
  dominant-baseline: middle;
  text-anchor: middle;
  transform-origin: center center;
}

<svg viewBox="0 0 100 100">
  <circle stroke="#333" stroke-width="3" fill="white" cx="50" cy="50" r="45"></circle>
  <circle stroke="#999" stroke-width="3" fill="transparent" cx="50" cy="50" r="42"></circle>
  <text id="txt" dominant-baseline="middle" text-anchor="middle"
x="50%" y="50%">Free</text>
  <text id="txt" dominant-baseline="middle" text-anchor="middle" x="50%" y="50%">Delivery</text>
</svg>