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，rect，path等元素不能包含子元素。

Answer 2

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

Answer 3

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

是否可以在SVG元素中附加div？

3 个答案: