SVG 向右对齐

【问题标题】：SVG align on the rightSVG 向右对齐
【发布时间】：2012-08-16 20:51:10
【问题描述】：

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

【问题讨论】：

标签： html text svg

【解决方案1】：

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

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

如果您删除 > 和

【讨论】：