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 라인 2"

이다 (줄 바꿈이 너무 공백되고 있습니다) 원하는대로 표시하십시오.