是否可以在 SVG 元素中添加 div？答案

【问题标题】：Is it possible to append a div inside an SVG element?是否可以在 SVG 元素中添加 div？
【发布时间】：2013-07-09 20:50:54
【问题描述】：

我正在尝试在 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");

【问题讨论】：

标签： javascript jquery html svg

【解决方案1】：

我也会考虑使用<g> 元素，因为它通过对对象进行分组来实现与<div> 类似的目的。 More about it here.

【讨论】：

完全正确。 g标签更好。感谢您的信息。

【解决方案2】：

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

【讨论】：

请记住foreignObject 在 IE 中不起作用，以防您需要跨浏览器兼容性。
@sam 如果它解决了您的问题，请考虑接受此答案。我知道规范，我可以验证它是否正确。
有趣！太糟糕了IE didn't even try to support it。有趣的事实：当您勾选 Preserve Illustrator Editing Capabilities 选项时，会显示在从 Adobe Illustrator 保存的 SVG 中。
"circle、rect、path 等不能有子元素。" 它们可以承载不可见的元素，例如。

【解决方案3】：

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

【讨论】：

它也不适用于我们的 rect。我刚刚添加了 rect 因为我想知道附加是否正在工作
查看这些教程。我可以向你保证，你将学到的不仅仅是 SVG……