如何按中心对齐一组 tspan 元素？

Question

我在谷歌上搜索了很多如何按中心对齐 tspan 集的方法，但我需要其他方法。我需要将 tspan 元素的集合居中对齐，并且每个元素都应该与其他元素在左侧对齐。

在下图中，您可以看到我想要达到的目标。

我尝试再添加一个 tspan 元素作为其他元素的包装并设置为它 text-anchor: middle，但它不起作用。

Answer 1

为此，我将使用 JavaScript 来计算第一个 tspan 的偏移量，即两个 tspan 元素之间的长度差的一半

let tspans = document.querySelectorAll("tspan");
let offset = (tspans[1].getComputedTextLength() - tspans[0].getComputedTextLength())/2
tspans[0].setAttributeNS(null,"dx", -offset)

svg {
    border: solid 1px blue;
    font-family: monospace;
}

<svg viewBox = "0 0 400 100">
    <circle r="3" cx="200" cy="50" fill="red">
    </circle>

    <text y="50" text-anchor="middle"><!--
      --><tspan x="200" >First label</tspan><!--
      --><tspan x="200" dy="15">Second long long long label</tspan>
   </text>
</svg>

Answer 2

我的目标是将不同的 tspan 组按中心对齐。感谢@enxaneta 的帮助。我发布了自己的答案，因为我遇到了一些有趣的子缺陷。最后 tspan 行未左对齐。我看到了 3 或 5 px space。它是由 XML space 引起的。您需要删除 tspan 元素之间的 spaces 才能解决此问题。

 let tspans = document.querySelectorAll("tspan");
 let indexOfLongestRow = 0;

 for(let i = 0; i < tspans.length; i++) {
  if(tspans[indexOfLongestRow].getComputedTextLength() < tspans[i].getComputedTextLength()) {
    indexOfLongestRow = i;
   }
 }

 console.log(tspans[indexOfLongestRow]);

 for(let i = 0; i < tspans.length; i++) {
    let offset = (tspans[indexOfLongestRow].getComputedTextLength() - tspans[i].getComputedTextLength())/2;

     console.log(offset);

  tspans[i].setAttributeNS(null, "dx", -offset);
 }

svg {
    border: solid 1px blue;
    font-family: monospace;
    font-size: 9px;
}

<svg viewBox = "0 0 400 500">
    <circle r="3" cx="200" cy="50" fill="red">
    </circle>

   <text y="50" text-anchor="middle">
     <tspan x="200" dy="15">Second long long long label</tspan><tspan x="200" dy="15">This is a longest label that i have here ergrtgrtgregregregerg</tspan><tspan x="200" dy="15">This is a longest label that i have here ergrtgrtgregregregerg</tspan><tspan x="200" dy="15">First label</tspan><tspan x="200" dy="15">First label dfhdfhh</tspan><tspan x="200" dy="15">This is a longest label that i have here ergrtgrtgregregregerg</tspan><tspan x="200" dy="15">First label rth th rthththsrth</tspan><tspan x="200" dy="15">First label rthrth rthrt 5tyjey yejetyj tyjtyj teyjteyj</tspan><tspan x="200" dy="15">First label reghregregregregregrge</tspan></text>
</svg>

如何按中心对齐一组 tspan 元素？

How to align set of tspan elements by center?

svg

alignment

tspan