Div灰化淡出时如何隐藏背景SVG线条？

我有两个通过SVG线条（基于D3.js图表实现）连接的div，特定操作时需要将部分div灰化/淡出。设置opacity: 0.5能实现灰化效果，但会让div变透明，导致背景的SVG线条透过div显现出来。

演示代码 #

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;">
    <div class="child1">text</div>
    <div class="child2"></div>
</div>
<div id="div2" style="width: 100px; height: 100px; top:200px; left:200px; background:#333; position:absolute;">
    <div class="child1">text</div>
    <div class="child2"></div>
</div>

<svg width="300" height="250"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
<button onclick="fade()">fade</button>
<button onclick="reset()">reset</button>

<script>
function fade () {
 document.getElementById('div1').className = 'greyout';
}
function reset() {
 document.getElementById('div1').className = '';
}
</script>

<style>
.greyout {
  opacity: 0.5;
}
</style>

解决方案 #

方法1：替换opacity为rgba背景色+文字透明度

opacity会让整个元素（包括背景和内容）透明，改用rgba单独设置背景和文字的透明度，既能实现灰化效果，又能保持div不透明，挡住下方SVG：

.greyout {
  /* 原背景色#777的半透明版本 */
  background: rgba(119, 119, 119, 0.5);
  /* 文字半透明 */
  color: rgba(0, 0, 0, 0.5);
}
/* 如果有子元素，可单独设置子元素的透明度 */
.greyout .child1 {
  color: rgba(0, 0, 0, 0.5);
}

方法2：添加半透明遮罩层

在目标div内部新增一个全屏遮罩层，通过类控制遮罩显示，实现灰化的同时挡住下方SVG：

1. 修改HTML结构：

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;">
    <div class="child1">text</div>
    <div class="child2"></div>
    <!-- 新增遮罩层 -->
    <div class="mask"></div>
</div>

2. 添加CSS：

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5); /* 可调整遮罩颜色和透明度 */
  display: none;
  pointer-events: none; /* 不干扰div内部的鼠标操作 */
}
.greyout .mask {
  display: block;
}

方法3：调整层级关系

通过z-index确保SVG始终在div下方，即使div透明度降低，也不会透出SVG：

#div1, #div2 {
  z-index: 1; /* 提升div层级 */
}
svg {
  position: absolute; /* 需设置定位才能生效z-index */
  top: 0;
  left: 0;
  z-index: -1; /* 将SVG置于底层 */
}

内容的提问来源于stack exchange，提问作者spidey