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>元素内。