jQuery 是否可以在 SVG 元素中附加一个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17595813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to append a div inside an SVG element?
提问by sam
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 rectelement code, but it doesn't show up in the graph UI.
我正在尝试在 SVG 中附加一个 HTML div，我正在尝试创建一个图形。我正在尝试使用下面的代码附加它，但是当我使用 Firebug 检查元素时，div 显示在rect元素代码中，但它没有显示在图形 UI 中。
Is it something wrong with the method that I am trying or is it impossible to append a div inside an SVG?
我正在尝试的方法有问题还是不可能在 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");
回答by methodofaction
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, pathand such can't have children elements.
您不能将 HTML 附加到 SVG（从技术上讲，您可以使用foreignObject，但这是一个兔子洞）。此外，在SVG可见元素不能嵌套，所以元素，例如circle，rect，path和这样不能生育的元素。
回答by Karolis Ramanauskas
I would also consider using <g>element as it serves similar purpose as <div>by grouping objects. More about it here.
我也会考虑使用<g>元素，因为它的用途与<div>对象分组类似。更多关于它在这里。
回答by AnaMaria
You are trying to append "rect" as well as "div" in the same line. Porbably that is where you are failing Check out these tutotials for D3... Its an amazing library based on SVG http://alignedleft.com/tutorials/d3/drawing-svgs/
您正在尝试在同一行中附加“rect”和“div”。可能这就是你失败的地方查看 D3 的这些教程......它是一个基于 SVG 的惊人库 http://alignedleft.com/tutorials/d3/drawing-svgs/
