本文介绍一种不依赖 mix-blend-mode 的纯 CSS + JavaScript 方案，通过实时检测滚动位置对应区域的背景亮度，自动将固定定位 SVG 图标的填充色（fill）切换为白色或深色，确保高对比度与可读性。
本文介绍一种不依赖 `mix-blend-mode` 的纯 css + javascript 方案，通过实时检测滚动位置对应区域的背景亮度，自动将固定定位 svg 图标的填充色（fill）切换为白色或深色，确保高对比度与可读性。
在响应式网页设计中，一个常被忽视但至关重要的细节是：固定定位（position: fixed）的图标或 Logo 在不同背景上需保持视觉可读性。当页面包含多段明暗差异显著的区块（如深色标题区、浅色内容区、渐变背景等）时，静态 SVG 颜色极易与背景融合，造成信息丢失。虽然 mix-blend-mode: difference 能实现动态反色效果，但其输出不可控——例如在灰色背景上可能生成模糊的紫/青色，违背设计一致性要求。
因此，更稳健的方案是：主动感知当前视口下方背景的亮度，并据此精准切换 SVG 的 fill 值。核心思路分为三步：
- 标记背景区块：为每个具有明确背景色（或可计算亮度的背景）的容器添加语义化 class（如 .bg-dark、.bg-light），并设置 data-brightness="dark" 或 "light" 属性；
- 监听滚动事件：利用 getBoundingClientRect() 判断固定 SVG 图标在视口中的垂直位置，再映射到当前覆盖的背景区块；
- 动态更新 fill：根据区块的 data-brightness 属性，为 SVG 设置预设的高对比度颜色（如 #ffffff 或 #1a1a1a），并启用 CSS 过渡实现平滑切换。
以下为完整可运行示例（含 HTML、CSS 与轻量 JavaScript）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SVG 亮度自适应</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.fixed-logo {
position: fixed;
top: 2rem;
left: 2rem;
width: 40px;
height: 40px;
z-index: 1000;
transition: fill 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动增强自然感 */
}
.fixed-logo svg {
display: block;
width: 100%;
height: 100%;
fill: #1a1a1a; /* 默认深色，适配亮背景 */
}
/* 背景区块定义 —— 必须有明确高度与 data-brightness */
.section {
min-height: 100vh;
padding: 4rem 2rem;
color: white;
text-align: center;
font-size: 2.5rem;
font-weight: bold;
}
.bg-white {
background-color: #ffffff;
color: #1a1a1a;
--brightness: light;
}
.bg-navy {
background-color: #0a192f;
--brightness: dark;
}
.bg-teal {
background-color: #0c7b66;
--brightness: dark;
}
.bg-sand {
background-color: #f5f0e6;
--brightness: light;
}
/* 可选：为深色背景下的文字增强可读性 */
.bg-dark .section-content { color: #e0e0e0; }
</style>
</head>
<body>
<!-- 固定 SVG Logo -->
<div class="fixed-logo">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</div>
<!-- 背景区块（带 brightness 标识） -->
<section class="section bg-white" data-brightness="light">
<div class="section-content">Light Background</div>
</section>
<section class="section bg-navy" data-brightness="dark">
<div class="section-content">Dark Navy</div>
</section>
<section class="section bg-teal" data-brightness="dark">
<div class="section-content">Teal Primary</div>
</section>
<section class="section bg-sand" data-brightness="light">
<div class="section-content">Warm Sand</div>
</section>
<script>
const logo = document.querySelector('.fixed-logo svg');
const sections = document.querySelectorAll('.section[data-brightness]');
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1 // 当 10% 区块进入视口即触发
};
// 初始化：首次加载时根据首屏背景设色
function updateLogoColor() {
const scrollY = window.scrollY + window.innerHeight / 2;
let targetBrightness = 'light'; // 默认
for (const section of sections) {
const rect = section.getBoundingClientRect();
const top = rect.top + window.scrollY;
const bottom = top + rect.height;
if (scrollY + window.innerHeight / 2 >= top && scrollY + window.innerHeight / 2 <= bottom) {
targetBrightness = section.dataset.brightness || 'light';
break;
}
}
logo.style.fill = targetBrightness === 'dark' ? '#ffffff' : '#1a1a1a';
}
// 滚动监听（节流优化）
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
updateLogoColor();
ticking = false;
});
ticking = true;
}
});
// 首次执行
updateLogoColor();
</script>
</body>
</html>✅ 关键优势说明：
- 精准可控：颜色由开发者明确定义（非算法生成），杜绝 difference 模式下的色彩漂移；
- 性能友好：使用 requestAnimationFrame 节流 + getBoundingClientRect，避免重排重绘；
- 无障碍友好：fill 变更不依赖混合模式，屏幕阅读器与打印样式均能正确解析；
- 扩展性强：支持渐变背景（需配合 Canvas 采样或 CSS 自定义属性传递亮度值）、图片背景（通过 canvas.getContext('2d').getImageData() 提取主色调）等进阶场景。
⚠️ 注意事项：
- 若背景使用复杂渐变或图片，请改用 IntersectionObserver API 监听区块进入视口，并结合 data-brightness 属性驱动；
- 避免对 <use> 引用的 SVG 元素直接操作 fill —— 应作用于 <svg> 或 <path> 的原始定义；
- 移动端需额外处理 touchmove 事件（示例中已隐含兼容，因 scroll 在 iOS Safari 中对 touchmove 有冒泡行为）。
此方案平衡了实现简洁性与视觉严谨性，是构建专业级响应式导航栏、悬浮按钮或品牌标识的推荐实践。
