html - SVG在右侧对齐

我正试图将多行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/

最佳答案

svg文本的默认值是压缩空白。这意味着文本开头和结尾的所有空格都被删除，中间的空格被压缩为一个空格。
每个<tspan>元素周围都有空格。第一个<tspan>之前和最后一个<tspan>之后的空白被删除，因此最后一个一直向右移动。第二行后面的空白只压缩成一个空格（注意换行符也变成空白），所以中间的一行实际上是“tspan line 2”
如果删除>和