是否可以在SVG元素中附加div？ [英] Is it possible to append a div inside an SVG element?

问题描述

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

I am trying to append an HTML div inside an SVG, which I am trying to create a graph. I am trying to append it using the code below, but when I inspect element using Firebug, the div is shown inside rect element code, but it doesn't show up in the graph UI.

我正在尝试的方法是否有问题，或者是否无法在SVG中附加div？

Is it something wrong with the method that I am trying or is it impossible to append a div inside an 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");

推荐答案

你不能将HTML附加到SVG（从技术上讲，你可以用 foreignObject ，但它是一个兔子洞。此外，SVG中的可见元素不能嵌套，因此 circle ， rect ，<$ c $等元素c>路径，这样就不能有子元素了。

You can't append HTML to SVG (technically you can with foreignObject, but it's a rabbit hole). Furthermore, visible elements in SVG can't be nested, so elements such as circle, rect, path and such can't have children elements.

这篇关于是否可以在SVG元素中附加div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！