Question

我创建了一个简单的div和svg ..

#firstElement {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 80px;
  left: 55px;
  top: 20px;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 2px;
  pointer-events: all;
}

<div>
  <div id='firstElement'></div>
  <svg>
  <rect id="border" y="0" x="0" height="100" width="200" opacity="1" fill="white" stroke="#DDDDDD" stroke-width="0"></rect>
  <circle id="circle" cx="100" cy="50" r="40" fill="lime" />
</svg>
</div>

即使我设置z-index。

，firstElement（ID）也不可见

我的预期输出是border - ＆gt; firstElement - ＆gt; circle

the post

如何实现这个目标？

Answer 1

解决方案：删除<rect>内的<svg>标记。

问题：问题在于<svg>您在<rect>周围应用了一个矩形（<circle>），该height="100"有width="200" fill="white"和{{ 1}}。如果您只是更改opacity="0"，则#firstElement div会在圆圈后面显示。我不确定您为什么首先包含<rect>。

整个<svg>标记是一个单独的单元，因此其中的元素具有相同的z-index。您无法使用<div>在<svg>的元素之间插入z-index。您必须将<svg>元素拆分为两个元素。

＆＃13;

#firstElement {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 100px;
  left: 57px;
  top: 10px;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 2px;
  pointer-events: all;
}

＆＃13;

<div>
  <div id='firstElement'></div>
  <svg>
  <!-- <rect id="border" y="0" x="0" height="100" width="200" opacity="0" fill="white" stroke="#DDDDDD" stroke-width="0"></rect> -->
  <circle id="circle" cx="100" cy="50" r="40" fill="lime" />
</svg>
</div>

＆＃13;

Answer 2

您可以使用firstElement

将svg移至foreignObject

＆＃13;

#firstElement {
  background-color:red;
  width: 100px;
  height: 80px;
}
svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}

＆＃13;

<div>
<svg>
  <rect id="border" y="0" x="0" height="100" width="200" opacity="1" fill="white" stroke="#DDDDDD" stroke-width="0"></rect>
  <foreignObject x="50" y="10">
    <div id="firstElement"></div>
  </foreignObject>
  <circle id="circle" cx="100" cy="50" r="40" fill="lime"></circle>
</svg>
</div>

＆＃13;

Answer 3

除了SVG代码之外，您不需要添加任何东西。

<svg>
  <rect id="border" y="0" x="0" height="150" width="200" opacity="1" fill="white" stroke="#000" stroke-width="1"></rect>
  <rect id="border" y="25" x="50" height="100" width="100" opacity="1" fill="red" stroke="#DDDDDD" stroke-width="0"></rect>
  <circle id="circle" cx="100" cy="75" r="40" fill="lime" />
</svg>

Answer 4

将图纸放在不同的svg标签中，定位svg的绝对值，给它们z索引。

#firstElement {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 80px;
  left: 55px;
  top: 20px;
  z-index: 1;
}

svg {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 2px;
  position: absolute;
  pointer-events: all;
}
#svgRect {
  z-index:0;
}
#svgCircle {
 z-index:2;
}

<div>
  <div id='firstElement'></div>
  <svg id="svgRect">
  <rect id="border" y="0" x="0" height="100" width="200" opacity="1" fill="white" stroke="#DDDDDD" stroke-width="0"></rect>
</svg>
<svg id="svgCircle">
  <circle id="circle" cx="100" cy="50" r="40" fill="lime" />
</svg>
</div>

如何使用z索引显示元素

4 个答案: