Firefox ... SVG ... Underline ... how for christ's sake?

Question

Anything I tried failed so far to get Firefox to underline some text.

According to Google-results this issue is known and documented for more than five years ... that just can't be true ... what is going on?

Someone knows any consitently working workaround or maybe even a reason as to why they didn't fix it yet!? ... I am very curious about that

Answer 1

Underlines on text in SVG, as well as other text decoration, is not supported in Firefox yet, that is true. (Bug 317196 attests to that.) There is a plan to rework the SVG text layout code over the next few months, the result of which should be (among other things) underlines working.

In the meantime, if you really need them (and cannot draw them manually with a <line>, because for example you don't know the text metrics), you could use a <foreignObject> to include some HTML content with underlines.

Answer 2

In my Firefox, a ForeignObject text within an SVG gets perfectly underlined if I include it in the right tags:

<html:u>blub</html:u>

... having declared html as a namespace in the svg, sample code looks like this:

<div style="border:solid black 2px;">
<svg:svg xmlns="http://www.w3.org/2000/svg"
  xmlns:html="http://www.w3.org/1999/xhtml"
  width="300" height="50" > 
 <foreignObject width="80" height="50">
   <html:u>blub</html:u>
 </foreignObject>
</svg:svg>
</div>

Would that be a solution for you?