是否可以在 SVG 元素中附加一个 div?

IT技术 javascript jquery html svg
2021-02-25 19:46:48

我正在尝试在 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");
3个回答

您不能将 HTML 附加到 SVG(从技术上讲,您可以使用foreignObject,但这是一个兔子洞)。此外,在SVG可见元素不能嵌套,所以元素,例如circlerectpath和这样不能生育的元素。

有趣的!太糟糕了IE 甚至没有尝试支持它有趣的事实:当您勾选“保留 Illustrator 编辑功能”选项时,<foreignObject> 会显示在从 Adob​​e Illustrator 保存的SVG 中
2021-04-16 19:46:48
圆、矩形、路径等不能有子元素。 ”它们可以承载不可见的元素,例如 <animate>。
2021-05-03 19:46:48
foreignObject如果您需要跨浏览器兼容性,请记住在 IE 中不起作用。
2021-05-12 19:46:48
@sam 如果此答案解决了您的问题,请考虑接受它。我知道规范,我可以验证它是否正确。
2021-05-12 19:46:48

我也会考虑使用<g>元素,因为它的用途与<div>对象分组类似更多关于它在这里

绝对正确。g标签更好。谢谢(你的)信息。
2021-04-20 19:46:48

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

它也不适用于我们的 rect .. 我只是添加了 rect 因为我想知道附加是否正在运行
2021-04-25 19:46:48
看看那些教程。我可以向您保证,您将学到的不仅仅是 SVG...
2021-05-04 19:46:48