在 SVG Text 元素中插入 HTML 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9946604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert HTML code inside SVG Text element
提问by todotresde
I have an svg:text node, and I want to add HTML code inside it. Actually, my code is:
我有一个 svg:text 节点，我想在其中添加 HTML 代码。实际上，我的代码是：
<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.
当然，我希望链接正常工作，但是，它只是显示所有 HTML。
Any Idea?
任何的想法？
回答by Robert Longson
Why not use an SVG <a>element in this case? Don't forget that the href needs to be xlink:href though. E.g.
<a>在这种情况下为什么不使用 SVG元素？不要忘记 href 必须是 xlink:href 。例如
<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.
仅允许SVG 动画元素、描述性元素（<title>或<desc>）、文本内容子元素（<tspan>或<textPath>）或 SVG<a>元素作为文本元素的子元素。
回答by ComFreek
You have to use the foreignObjecttag, for example:
您必须使用foreignObject标签，例如：
<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.htmland https://developer.mozilla.org/en/SVG/Element/foreignObject
另请参见此处http://www.w3.org/TR/SVG/extend.html和https://developer.mozilla.org/en/SVG/Element/foreignObject
回答by Joseph Francis
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.
这里的另一个解决方案是在项目上放置一个事件并使用 javascript 打开目标 URL .. 而根本不使用标签。
