SVG: отступ в тексте / пробел в последнем tspan в группе элементов tspan

Question

Этот код вставляет пробел в последнюю часть группы элементов tspan, в результате чего последняя строка текста выпадает из выравнивания (по оси X).

Если вы добавляете / удаляете элементы tspan из группы, такое поведение всегда отображается в последней строке текста.

Что вызывает этот дополнительный пробел или отступ?

Код ручка: https://codepen.io/anon/pen/vvyZaj

<svg id="textBox1" x="0" y="0" width="200" height="300">
  <rect class="background" x="0%" y="0%" width="100%" height="100%" fill="gray" />

  <text class="textLines" x="0" y="0">
        <tspan x="100" dy="0.6em" text-anchor="middle" dominant-baseline="middle">tspan line 0</tspan>
        <tspan x="100" dy="1.2em" text-anchor="middle" dominant-baseline="middle">tspan line 1</tspan>
        <tspan x="100" dy="1.2em" text-anchor="middle" dominant-baseline="middle">tspan line 2</tspan>
  </text>
</svg>

Answer 1

Пробелы по умолчанию разрушаются в SVG и HTML, то есть несколько непрерывных пробелов преобразуются в один пробел в тексте или вообще без пробела в начале и конце.

У вас сложный макет, хотя вы не понимаете, где текст в <tspan> Элемент имеет различные свойства CSS, которые влияют на его выравнивание как по вертикали, так и по горизонтали, но пробелы, окружающие его, - нет. Этот пробел, однако, повлияет на макет.

Самое простое, что можно сделать, это удалить все пробелы, которые находятся внутри <text> элементы, которые также не в пределах <tspan> элемент.