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”

如果删除＆gt;之间的所有空格并且＆lt;它将根据您的需要显示的字符。