Insert HTML code inside SVG Text element

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?

Solution 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.

Solution 2:

You have to use the foreignObject tag, for example:

<foreignObject width="100" height="50"
                   requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
  <body xmlns="http://www.w3.org/1999/xhtml">
    <a href='www.gmail.com'>Gmail</a>
  </body>
</foreignObject>

See also here http://www.w3.org/TR/SVG/extend.html and https://developer.mozilla.org/en/SVG/Element/foreignObject

Insert HTML code inside SVG Text element

Solution 1:

Solution 2:

Related

Recent Posts