Как выровнять набор элементов tspan по центру?

Question

Я погуглил много способов, как выровнять набор tspan по центру, но мне нужно что-то еще. Мне нужно выровнять набор tspan элементов по центру, и каждый элемент должен быть выровнен по левой стороне с другими элементами.

На картинке ниже вы можете увидеть, чего я пытаюсь достичь.

JSFiddle

Я попытался добавить еще один элемент 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 пикселей.Это было вызвано пространством XML.Вам нужно удалить пробелы между tspan элементами, чтобы избавиться от этой проблемы.

	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>