How to align set of tspan elements by center?

Question

I googled a lot of ways how to align set of tspan by center, but I need something else. I need to align the set of tspan elements by center and each element should be aligned by the left side with other elements.

On the picture below you can see what I'm trying to reach.

JSFiddle

I tried to add one more tspan element as a wrapper for other and set to it text-anchor: middle, but it doesn't work.

Answer 1

For this I would use JavaScript to calculate the offset for the first tspan as half the difference of length between the two tspan elements

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

My destination goal was to align group of different tspan by the center. I appreciate @enxaneta help. I posted my own answer as I stuck with some interesting sub defect. The last tspan row wasn't left aligned. I saw 3 or 5 px space. It was caused by XML spaces. You need to delete spaces between tspan elements in order to get rid of this issue.

 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>