Question

此代码在一组tspan元素的最后一个插入空格，导致文本的最后一行不对齐（在x轴上）。

如果您从组中添加/删除tspan元素，则文本的最后一行始终会显示此行为。

什么原因导致了此多余的空格或缩进？

<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中的空白会折叠，即多个连续的空白会转换为文本内的单个空格，或者在开头和结尾处完全没有空格。

尽管您没有意识到btn.addEventListener("click", function (ev) { var url = "https://XXXX/XXXXX/XXXXXX/"; var newWin = window.open(url, "_blank"); window.focus(); ev.stopPropagation(); }, true);元素中的文本具有各种CSS属性，这些属性会影响其在垂直和水平方向上的对齐方式，但是布局却很复杂，但周围的空白不会。但是，该空格会影响布局。

最简单的方法是删除val_loss元素内的所有空白，而不是<tspan>元素内的所有空白。

SVG：tspan元素组中最后一个tspan上的文本缩进/空格问题

1 个答案: