求助：实现H1标签文本与SVG重叠区域变暗的方案

核心思路 #

通过两层文本叠加实现效果：底层是正常颜色的H1，上层是深色H1，利用SVG路径作为裁剪规则，只让上层深色文本显示在SVG覆盖的区域。这种方案能自动适配文本位置变化，完全替代固定图片的局限性，且效果比mix-blend-mode更可控。

具体实现步骤 #

1. 转换SVG路径为裁剪定义：将你的SVG路径嵌入到SVG的clipPath元素中，隐藏SVG本身仅使用其裁剪规则。
2. 构建嵌套文本结构：用容器包裹两层完全相同的H1文本，确保位置完全重叠。
3. 应用裁剪规则：给上层深色文本绑定SVG裁剪路径，仅在SVG覆盖区域显示深色文本。

代码示例 #

<div class="text-wrapper">
  <!-- 隐藏的SVG，仅用于提供裁剪路径 -->
  <svg style="position: absolute; width: 0; height: 0;">
    <defs>
      <clipPath id="svg-overlay-clip">
        <!-- 替换成你的实际SVG路径 -->
        <path d="M80,180 C80,80 230,80 230,180 S380,280 380,180" fill="none" />
      </clipPath>
    </defs>
  </svg>

  <!-- 底层正常颜色文本 -->
  <h1 class="regular-text">Dynamic Heading That Moves Around</h1>
  <!-- 上层深色文本，仅在SVG区域显示 -->
  <h1 class="dark-overlay-text">Dynamic Heading That Moves Around</h1>
</div>

.text-wrapper {
  position: relative;
}

.regular-text {
  color: #444; /* 正常文本颜色 */
}

.dark-overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  color: #000; /* 重叠区域深色 */
  clip-path: url(#svg-overlay-clip);
  margin: 0;
}

替代方案：使用CSS mask-image #

若SVG可转为数据URI，也可通过伪元素实现，无需重复文本：

h1 {
  position: relative;
  color: #444;
}

h1::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
  /* 替换为你的SVG数据URI */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 260"><path d="M80,180 C80,80 230,80 230,180 S380,280 380,180" fill="white"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
}

对应HTML结构：

<h1 data-content="Dynamic Heading That Moves Around">Dynamic Heading That Moves Around</h1>

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