javascript - 是否可以在 SVG 元素中添加 div？

Question

我正在尝试在 SVG 中附加一个 HTML div，我正在尝试创建一个图形。我正在尝试使用下面的代码附加它，但是当我使用 Firebug 检查元素时，div 显示在rect元素代码中，但它没有显示在图形 UI 中。

我正在尝试的方法有问题还是无法在 SVG 中附加 div？

    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");

Answer 1

您不能将 HTML 附加到 SVG（从技术上讲，您可以使用foreignObject，但这是一个兔子洞）。此外，SVG 中的可见元素不能嵌套，因此,circle等元素不能有子元素。rectpath

Answer 2

我也会考虑使用<g>元素，因为它的目的与<div>对对象进行分组类似。更多关于它的信息。

Answer 3

您试图在同一行中附加“rect”和“div”。可能这就是你失败的地方查看这些 D3 教程......它是一个基于 SVG 的惊人库 http://alignedleft.com/tutorials/d3/drawing-svgs/