SVG：关于 tspan 元素组中最后一个 tspan 的文本 indentation/space 问题

Question

此代码在一组 tspan 元素的最后插入白色 space，导致最后一行文本未对齐（在 x 轴上）。

如果您 add/remove tspan 组中的元素，文本的最后一行总是表现出这种行为。

是什么导致了这种额外的白色 space 或缩进？

<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

Whitespace 在 SVG 中折叠，默认情况下 HTML，即多个连续的白色 space 在文本中转换为单个 space 或没有 space在开头和结尾。

您的布局很复杂，但您没有意识到 <tspan> 元素中的文本具有各种 CSS 属性，这些属性会影响其垂直和水平对齐，但白色 space 周围没有。但是白色space会影响布局

最简单的做法是删除 <text> 元素中不在 <tspan> 元素中的所有白色 space。

SVG：关于 tspan 元素组中最后一个 tspan 的文本 indentation/space 问题

SVG: text indentation/space issue on last tspan in group of tspan elements

html

svg

text

tspan