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」

如果刪除>和<字符之間的所有空格，根據需要顯示。