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>元素的所有空格。