1

此代码在一组 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>
4

1 回答 1

1

默认情况下，SVG 和 HTML 中的空格折叠，即多个连续的空格转换为文本中的单个空格，或者在开头和结尾处根本没有空格。

您有一个复杂的布局，尽管您没有意识到<tspan>元素中的文本具有各种 CSS 属性，这些属性会影响其垂直和水平对齐，但它周围的空白不会。然而，该空白会影响布局。

最简单的做法是删除元素内的所有空格，而<text>不是元素内的空格<tspan>。

于 2018-12-19T10:45:57.907 回答