在SVG Text元素中插入HTML代码

tod*_*sde 33 html svg text

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

<text x="10" y="54" text-anchor="start" class="barLegend">Hello!</text>
Run Code Online (Sandbox Code Playgroud)

我想要这样的东西:

<text x="10" y="54" text-anchor="start" class="barLegend"><a href='www.gmail.com'>Gmail</a></text>
Run Code Online (Sandbox Code Playgroud)

当然,我希望链接正常工作,但它只显示所有HTML.

任何的想法?

Rob*_*son 18

<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>
Run Code Online (Sandbox Code Playgroud)

仅允许SVG动画元素,描述性元素(<title><desc>),文本内容子元素(<tspan><textPath>)或SVG <a>元素作为文本元素的子元素.


Com*_*eek 6

您必须使用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>
Run Code Online (Sandbox Code Playgroud)

另请参见http://www.w3.org/TR/SVG/extend.htmlhttps://developer.mozilla.org/en/SVG/Element/foreignObject

  • ForeignObject标记不能是文本元素的子代。 (5认同)
  • 谢谢!那就是使用我所寻找的方式。另外,当有人对D3遇到相同问题时,我找到了一个链接:http://groups.google.com/group/d3-js/browse_thread/thread/77671e2884df4f1d (2认同)