是否有可能在svg元素内附加一个div
问题描述:
我试图在svg里追加一个html div,我试图创建一个图。我试图使用下面的代码来追加它,但是当我使用萤火虫检查元素时。div显示在“rect”元素代码内,但它不显示在图形用户界面中。这是否与我尝试的方法一样,或者是不可能在svg中追加一个div?是否有可能在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");
答
您不能追加的HTML SVG(技术上可以跟foreignObject
,但它是一个兔子洞)。此外,SVG中的可见元素不能嵌套,因此诸如circle
,rect
,path
等元素不能包含子元素。
答
您正试图在同一行中追加“rect”以及“div”。 Porbably这是你在哪里......其惊人的图书馆基于SVG失败 查阅这些tutotials为D3 http://alignedleft.com/tutorials/d3/drawing-svgs/
答
我还会考虑使用<g>
元素,因为它可以通过对对象进行分组来达到类似的目的<div>
。 More about it here。
+1
绝对正确。 g标签更好。谢谢(你的)信息。 – swapyonubuntu
感谢您提及foreignObject!它的工作 – sam
请记住'foreignObject'在IE中不起作用,以防您需要跨浏览器兼容性。 – Duopixel
@sam请考虑接受这个答案,如果它解决了你的问题。我知道规范,我可以验证它是正确的。 –