如何实现文字覆盖绿色SVG区域时自动变为指定灰色(#21262A)

不要用mix-blend-mode: difference，这个模式本身就是做差值反色计算的，没法直接指定目标色。要实现任意自定义颜色的叠加切换，用双层文字+遮罩的方案最稳定，颜色100%可控。

实现逻辑 #

• 最下层正常铺你的页面背景、绿色SVG图形
• 叠两层内容、位置、字体样式完全一致的文字：
  • 下层是默认显示的白色文字，全区域显示
  • 上层是你要的#21262A灰色文字，只在绿色SVG覆盖的区域显示，其余区域被遮罩隐藏
• 两层文字完全对齐之后，视觉上就会自动呈现「普通区域白字、绿色SVG区域灰字」的效果，没有任何颜色偏差。

核心实现代码 #

/* 容器设置相对定位，作为所有绝对定位元素的参照 */
.wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000; /* 替换成你的页面实际背景色 */
}
/* 绿色SVG的定位样式，和你的实际布局匹配 */
.green-shape {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 300px;
  fill: #16a34a; /* 替换成你用的绿色色值 */
}
/* 两层文字的公共样式，必须完全一致保证重叠对齐 */
.text {
  position: absolute;
  margin: 0;
  top: 25%;
  left: 15%;
  width: 70%;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
}
/* 底层默认白字 */
.text-white {
  color: #fff;
  z-index: 1;
}
/* 上层目标色灰字，加和SVG形状完全匹配的遮罩 */
.text-gray {
  color: #21262A;
  z-index: 2;
  /* 遮罩路径、位置、尺寸和绿色SVG完全对应 */
  -webkit-mask: url(#shape-mask) 20% 20%/300px no-repeat;
  mask: url(#shape-mask) 20% 20%/300px no-repeat;
}

<div class="wrap">
  <!-- 页面里的绿色SVG图形 -->
  <svg class="green-shape" viewBox="0 0 100 100">
    <path d="M0,50 C20,0 80,0 100,50 C80,100 20,100 0,50 Z" />
  </svg>

  <!-- 不占空间的遮罩定义，路径和绿色SVG完全一致 -->
  <svg width="0" height="0" aria-hidden="true">
    <defs>
      <mask id="shape-mask">
        <path fill="#fff" d="M0,50 C20,0 80,0 100,50 C80,100 20,100 0,50 Z" />
      </mask>
    </defs>
  </svg>

  <p class="text text-white">测试文字内容，叠加到绿色图形区域会自动切换为指定灰色</p>
  <p class="text text-gray">测试文字内容，叠加到绿色图形区域会自动切换为指定灰色</p>
</div>

方案说明 #

• 遮罩里填充白色的区域才会显示上层的灰色文字，所以只要保证遮罩的路径、位置、尺寸和你的绿色SVG完全一致，就能实现完美的边缘贴合，不管SVG是多复杂的不规则形状都支持。
• 如果后续要加更多颜色分区，只要对应加更多层文字、给每层配对应区域的遮罩即可，扩展很方便。
• 不推荐强行调整其他混合模式的参数凑颜色，混合模式受底层颜色影响很大，换个背景色就会失效，稳定性远不如遮罩方案。

效果对比 #

• 初始效果：
  
• 使用mix-blend-mode: difference的反色效果（无法自定义目标色）：
  

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