在 SVG 文本元素中插入 HTML 代码答案

【问题标题】：Insert HTML code inside SVG Text element在 SVG 文本元素中插入 HTML 代码
【发布时间】：2012-04-14 08:28:08
【问题描述】：

我有一个 svg:text 节点，我想在其中添加 HTML 代码。实际上，我的代码是：

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

我想这样写：

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

当然，我希望链接正常工作，但是，它只是显示所有 HTML。

有什么想法吗？

【问题讨论】：

从 SVG 2 开始，xlink 已弃用，href 可以正常工作。

标签： html text svg

【解决方案1】：

在这种情况下，为什么不使用 SVG <a> 元素？不要忘记，href 必须是 xlink:href。例如

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

仅允许 SVG 动画元素、描述性元素（<title> 或 <desc>）、文本内容子元素（<tspan> 或 <textPath>）或 SVG <a> 元素作为文本元素的子元素。

【讨论】：

嗯，不清楚有什么区别。可以举个例子吗？
一个 svg 链接元素在 svg 命名空间中，一个 html 链接元素在 html 命名空间中，否则它们看起来非常相似。

【解决方案2】：

你必须使用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>

参见此处http://www.w3.org/TR/SVG/extend.html 和 https://developer.mozilla.org/en/SVG/Element/foreignObject

【讨论】：

foreignObject 标签不能是文本元素的子元素。
谢谢！那就是使用我正在寻找的东西的方式。另外，当有人对 D3 有同样问题时，我找到了一个链接：groups.google.com/group/d3-js/browse_thread/thread/…
但是 x 和 y 坐标在哪里？

【解决方案3】：

这里的另一个解决方案是在项目上放置一个事件并使用 javascript 打开目标 URL .. 并且根本不使用标记。

【讨论】：

欢迎来到stackoverflow。这没有提供问题的答案。一旦您有足够的声誉，您就可以对任何帖子发表评论；相反，提供不需要提问者澄清的答案。
这是推断问题的有效替代解决方案，在这里很有价值。如果违反政策，则应更新政策。