是否可以在 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");

原文由 sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 methodofaction 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我还会考虑使用 <g> 元素，因为它通过对对象进行分组来实现与 <div> 相似的目的。 更多信息请点击此处。

原文由 Karolis Ramanauskas 发布，翻译遵循 CC BY-SA 3.0 许可协议