2

I'm trying to understand the tspan tag in svg and here is something weird. Look at the following code, FF and Chrome introduce an horizontal offset between the tspans but there shouldn't be any.

<svg width="625" height="470" xmlns="http://www.w3.org/2000/svg">
<text y="406" x="379" text-anchor="start" stroke-width="0" stroke="#000000" fill="#FF0000">
<tspan x="379" font-weight="normal" font-style="normal" font-size="24" font-family="Arial" fill="#000000" dy="0">a</tspan>
<tspan font-weight="normal" font-style="normal" font-size="24" font-family="Arial" fill="#000000">aa</tspan>
</text>
</svg>

Now go to http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html and enter the code in the SVG editor (second button in the top menu bar) and apply the changes. The offset between the tspans is not there! I can't find out why, there seems to be nothing special in the HTML nor the SVG nor the CSS.

I hope someone can solve this riddle. It seems to be connected to the font-size, changing that changes the offset. However when it is set to 0px the text disappears.

Jonas
  • 121,568
  • 97
  • 310
  • 388
pogon
  • 305
  • 2
  • 3
  • 10

2 Answers2

5

The line breaks between the tspans will be converted to spaces. I'd guess that svg-edit strips them off.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • thanks - this has been driving me crazy - Chrome handles the line breaks and spaces the same as for HTML - I wonder is one correct as regards the specification. – scytale Jan 31 '13 at 00:14
0

I tried add horizontal space to tspan tag with attributes dy (from top) and dx (from left), like this:

<tspan dy="8">
  <tspan dx="5">200</tspan>
</tspan>

May be helpful for someone.

Erik P_yan
  • 608
  • 5
  • 6