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?
4 answers
solution1
24 ACCPTED 2012-03-30 16:15:26
Take a look here :
The SVG foreignObject tag allows you to mix non-SVG content into your page. For example, you could drop some HTML in the middle of an SVG element.
solution2
19 2012-03-30 16:29:49
Why not use an SVG <a> element in this case? Don't forget that the href needs to be xlink:href though. Eg
<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.
solution3
4 2012-03-30 16:16:05
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
solution4
2 2017-09-03 14:20:23
这里的另一个解决方案是在项目上放置一个事件并使用javascript打开目标URL ..而根本不使用该标记。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.