是否可以在 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、path等元素不能有子元素.

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屋！