实现SVG随背景动态透明：深色背景下隐藏红色填充保留黑边框

问题背景 #

• 需求：全局头部的SVG元素，在深色背景的div上方时，需要隐藏红色填充色，只保留黑色空心边框
• 已尝试但不可行的方案：z-index方案无效；滚动混合效果方案不适用当前场景；试过用mask实现红色填充隐藏，也考虑过直接修改原始SVG为黑色边框样式
• 当前问题：用jQuery实现了效果，但仅对第一个深色div生效

修正后的实现代码 #

HTML核心结构 #

<!-- 全局头部 -->
<header class="global-header">
  <svg class="logo" viewBox="0 0 100 100">
    <path fill="#ff0000" stroke="#000" stroke-width="2" d="M10,10 L90,10 L90,90 L10,90 Z" />
  </svg>
</header>

<!-- 页面内容区块 -->
<section class="dark-bg">深色区块1</section>
<section>普通区块</section>
<section class="dark-bg">深色区块2</section>

CSS样式定义 #

.global-header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem;
}

.dark-bg {
  background-color: #333;
  color: #fff;
  padding: 5rem 1rem;
  margin: 2rem 0;
}

.logo {
  width: 50px;
  height: 50px;
}

.logo.transparent-fill {
  fill: transparent;
}

修正后的jQuery逻辑 #

$(window).on('scroll', function() {
  const headerLogo = $('.logo');
  const darkSections = $('.dark-bg');
  
  let isOverDarkBg = false;
  
  // 遍历所有深色区块，检查头部logo的垂直位置是否重叠
  darkSections.each(function() {
    const sectionTop = $(this).offset().top;
    const sectionBottom = sectionTop + $(this).outerHeight();
    const headerBottom = $('.global-header').offset().top + $('.global-header').outerHeight();
    
    if (headerBottom > sectionTop && $('.global-header').offset().top < sectionBottom) {
      isOverDarkBg = true;
      return false; // 找到匹配项后终止遍历
    }
  });
  
  // 根据判断结果切换SVG填充状态
  headerLogo.toggleClass('transparent-fill', isOverDarkBg);
});

实现说明 #

• 核心逻辑：通过滚动事件遍历所有深色背景区块，判断头部logo是否处于深色区块的垂直覆盖范围内
• 样式控制：利用transparent-fill类切换SVG填充色的显示/隐藏，仅保留黑色边框
• 修复点：原代码仅判断第一个深色区块，修改为遍历所有区块并更新位置判断逻辑，确保所有深色区域都能触发效果

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