SVG: отступ в тексте / пробел в последнем tspan в группе элементов tspan - PullRequest
Новая
       42

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

0 голосов
/ 19 декабря 2018

Этот код вставляет пробел в последний из группы элементов 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>

1 Ответ

0 голосов
/ 19 декабря 2018

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

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

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

...