html - SVG 向右对齐

Question

我试图证明右边的多行 svg 文本是合理的，但最后一行文本总是在右边更远，我不知道为什么。

重要的东西。

<svg style="border:1px solid blue;" text-anchor="end">
    <text font-size="30px">
        <tspan x="100%" dy="30">tspan line 1</tspan>
        <tspan x="100%" dy="35">tspan line 2</tspan>
        <tspan x="100%" dy="35">tspan line 3</tspan>
    </text>
</svg>

http://jsfiddle.net/kCuSa/

Answer 1

SVG 文本的默认设置是压缩空白。这意味着文本开头和结尾的所有空格都被删除，中间被压缩为一个空格。

<tspan>每个元素周围都有空格。第一个之前和最后一个之后的空格<tspan>被删除，所以最后一个<tspan>一直向右。第二个之后的空格只被压缩到一个空格（注意换行符也变成了空格）所以中间行实际上是“tspan line 2”

如果您删除 > 和 < 字符之间的所有空格，它将按照您的意愿显示。