Insert HTML code inside SVG Text element

Question

I have an svg:text node, and I want to add HTML code inside it. Actually, my code is:

<text x="10" y="54" text-anchor="start" class="barLegend">Hello!</text> 

And I want to put something like this:

<text x="10" y="54" text-anchor="start" class="barLegend"><a href='www.gmail.com'>Gmail</a></text> 

Of course, I want the link working, but, it is just displaying all the HTML.

Any Idea?

Answer 1

Why not use an SVG <a> element in this case? Don't forget that the href needs to be xlink:href though. E.g.

<text x="10" y="54" text-anchor="start" class="barLegend"><a xlink:href='http://www.gmail.com'>Gmail</a></text> 

Only SVG animation elements, descriptive elements (<title> or <desc>), text content child elements (<tspan> or <textPath>) or the SVG <a> element are allowed as children of text elements.