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>

有没有一种方法可以将SVG元素以绝对位置放在HTML div上方？

1 个答案: