3

複数行の 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/

4

1 に答える 1

3

SVG テキストのデフォルトは、空白を圧縮することです。つまり、テキストの最初と最後にあるすべてのスペースが削除され、中間は 1 つのスペースに圧縮されます。

<tspan>各要素の周りに空白があります。最初の前と最後の後の空白<tspan>は削除されるため、最後<tspan>は完全に右に移動します。2 番目の後の空白はスペースにのみ圧縮されるため (改行も空白になることに注意してください)、中間行は実際には "tspan line 2 " です。

> と < 文字の間のすべての空白を削除すると、希望どおりに表示されます。

于 2012-08-16T21:10:29.397 に答える