能否在SVG元素内添加一个div？

Question

我想在创建的SVG图形中添加HTML div，用于制作图表。我使用以下代码进行附加，但是当我使用Firebug检查元素时，rect代码内显示了div，但是它没有显示在图形UI中。

我尝试的方法有问题吗？还是不可能将div附加到SVG内？

    marker.append("rect")
   .attr("width", "50px")
   .attr("height", "50px")
   .append("div")
   .attr("id", function(d) {
      return "canvas_" + d.key.split(" ").join("_");
   })
   .style("width", "50px").style("height", "50px");

- sam

Answer 1

您无法将HTML附加到SVG（从技术上讲，您可以使用foreignObject，但这会导致问题复杂化）。此外，SVG中的可见元素不能嵌套，因此像circle，rect，path等元素不能具有子元素。

- methodofaction

---

请注意，如果您需要跨浏览器兼容性，foreignObject在IE中无法使用。 - methodofaction

@sam 如果这个答案解决了你的问题，请考虑接受它。我知道规范并且可以验证它是正确的。 - Benjamin Gruenbaum

有趣！太糟糕了，IE甚至没有尝试支持它。有趣的事实是：当您选中“保留Illustrator编辑功能”选项时，**<foreignObject>**会出现在从Adobe Illustrator保存的SVG中。 - Mentalist

circle、rect、path等元素不能有子元素。 它们可以容纳非可见元素，例如<animate>。 - Kaiido

Answer 2

我也会考虑使用 <g> 元素，因为它与 <div> 具有类似的功能，可以对对象进行分组。了解更多信息。

- Karolis Ramanauskas

---

非常正确。g标签更好。感谢提供信息。 - swapyonubuntu

Answer 3

您试图在同一行中同时添加“rect”和“div”。可能是这个原因导致了错误。 请查看以下D3教程...它是一个基于SVG的惊人库 http://alignedleft.com/tutorials/d3/drawing-svgs/

- AnaMaria

---

它也无法与我们的矩形一起工作... 我只是添加了矩形，因为我想知道附加是否有效。 - sam

看看这些教程。我保证你不仅会学到SVG，还会学到更多其他的内容。 - AnaMaria

Answer 4

如果你在浏览器中使用HTML和SVG，解决办法是使用z-index。不要将HTML放入SVG中，而是将HTML放在SVG的上方或SVG放在HTML的上方。我曾经使用这个技巧在浏览器中渲染实体关系图。我使用绝对位置在HTML表格中排列实体，并在SVG中绘制关系。如果正确配置SVG的viewBox，你可以在HTML和SVG中使用相同的坐标。

- ceving