Question

我有一个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。

任何想法？

Answer 1

看看这里：

http://web.archive.org/web/20120418122612/http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

SVG foreignObject标记允许您将非SVG内容混合到页面中。例如，您可以在SVG元素的中间删除一些HTML。

Answer 2

为什么不在这种情况下使用SVG <a>元素？不要忘记，href需要是xlink：href。 E.g。

<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>元素被允许作为文本元素的孩子。

Answer 3

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

Answer 4

此处的另一个解决方案是在项目上放置一个事件并使用javascript打开目标网址。根本不使用该标记。

在SVG Text元素中插入HTML代码

4 个答案: