Search code examples
svgtspan

SVG tspan horizontal offset


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.


Solution

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