Author: FT2.wiki

Description:
The following SVG code snip renders correctly on IE6 and Opera, but incorrectly on Firefox:

<text style="font-size:14px;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial">

<tspan x="20" y="25">generic blah</tspan>
<tspan x="20" dy='70px'>(blah blah <tspan style="fill:#0024d0">WP:NOT</tspan>, etc)</tspan>

</text>

DOES NOT WORK

However if the second line is not written using nested tspans (ie each tspan element closes and then reopens), it renders correctly on both:

<text style="font-size:14px;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial">

<tspan x="20" y="25">generic blah</tspan>
<tspan x="20" dy='70px'>(blah blah </tspan><tspan style="fill:#0024d0">WP:NOT</tspan><tspan>, etc)</tspan>

</text>

WORKS

More specifically, the bug is that in the first example, Firefox has the inner <tspan> inherit the dy="70px" of the outer, and hence an extra 70px line break is inserted which was not requested. Somwhat surprisingly though (and perhaps another bug??) explicitly stating dy="0px" in the inner <tspan> of the initial example does not actually fix it.

Needs reporting to Mozilla for fixing.

Workaround: Do not use nested tspan elements in SVGs. Close the first <tspan> then reopen a second one immediately. The correct x and y positions will be remembered and used.

Version: unspecified
Severity: normal