CODEWITHSUNDEEP
htmltextsvg
todotresde
todotresde

Reputation: 1790

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?

Upvotes: 41

Views: 65581

Answers (3)

Joseph Francis
Joseph Francis

Reputation: 51

Another solution here is to put an event on the item and use javascript to open the target URL .. and not use the tag at all.

Upvotes: 4

Robert Longson
Robert Longson

Reputation: 124289

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.

Upvotes: 22

ComFreek
ComFreek

Reputation: 29444

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

Upvotes: 17

Related Questions