有没有办法将 SVG 元素放在具有绝对位置的 HTML div 上方？

Question

我是 D3.js 的新手，我有一个特定的问题。我正在尝试将一个元素（圆圈）放在具有绝对位置的 HTML div 上方的 SVG 中，我可以在那里做些什么？

我已经尝试放置 z-index，更改位置类型...我认为我的问题在于 SVG，我无法像通常使用常规 HTML 那样应用相同的规则。

看这个例子https://jsfiddle.net/L70yk9f1/13/

div.a {
  width: 400px;
  height: 400px;
  background: lightgrey;
}

div.b {
  width: 200px;
  height: 400px;
  background: lightgreen;
  position: absolute;
  top: 8px;
  left: 400px;
}

<!-- the circle should appear above the green div -->
<div class="a">
  <svg width="400px" height="400px">
    <circle cx="390" cy="100" r="50" x="100" style="stroke: black; fill: yellow;"/>
  </svg>  
</div>
<div class="b"></div>

我正在尝试将黄色圆圈（SVG 中的一个元素）放在绿色 div 上方。

Answer 1

我想这就是你想要的......？

div.a {
  width: 100%;
  height: 400px;
  background: lightgrey;
  position:absolute;
}
div.a svg{
    position: absolute;
    z-index: 999999;
    width: 100%;
    height:100%;
}
div.b {
  width: 200px;
  height: 400px;
  background: lightgreen;
  position: absolute;
  top: 8px;
  left: 400px;
}

<!-- the circle should appear above the green div -->
<div class="a">
  <svg>
    <circle cx="390" cy="100" r="50" x="100" style="stroke: black; fill: yellow;"/>
  </svg>  
</div>
<div class="b"></div>