带渐变的SVG中使用mix blend mode实现滚动Logo变色失效求助

现有代码问题 #

• SVG根标签属性语法错误：fill="none style={{ isolation: 'isolate' }}" 属于属性未正确闭合，浏览器无法正常解析你写的隔离样式，导致混合模式和交互样式都不生效。
• 所有路径填充绑定的是固定渐变ID，没有预留切换填充规则的逻辑，自然无法实现滚动到指定区域变色的效果。

修正后的基础SVG代码 #

<svg 
  width="42" 
  height="42" 
  viewBox="0 0 42 42" 
  fill="none" 
  style={{ isolation: 'isolate' }}
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- 所有path保留原有mixBlendMode配置，fill属性改成动态绑定 -->
  <path 
    style={{ mixBlendMode: 'multiply' }} 
    d="M2.63155 21.3059C3.97381 21.3059 12.4599 20.2178 12.4599 18.8755C12.4599 17.5333 3.97381 16.4452 2.63155 16.4452C1.28929 16.4452 0.201172 17.5333 0.201172 18.8755C0.201172 20.2178 1.28929 21.3059 2.63155 21.3059Z" 
    fill={isOverButton ? "url(#paint_alt)" : "url(#paint_default)"}
  />
  <!-- 其余5个path的fill属性都和上面一样改成动态绑定即可 -->
  <defs>
    <!-- 原有默认渐变，统一ID为paint_default即可，不需要重复写6个一模一样的渐变 -->
    <linearGradient id="paint_default" x1="1.06524" y1="41.0441" x2="45.9419" y2="-3.85208" gradientUnits="userSpaceOnUse">
      <stop offset="0.102083" stop-color="#24688C"/>
      <stop offset="0.440625" stop-color="#815FA3"/>
      <stop offset="0.89375" stop-color="#FF05AA"/>
    </linearGradient>
    <!-- 新增滚动到按钮上方时要切换的渐变，自定义颜色即可 -->
    <linearGradient id="paint_alt" x1="1.06524" y1="41.0441" x2="45.9419" y2="-3.85208" gradientUnits="userSpaceOnUse">
      <stop offset="0.102083" stop-color="#ffffff"/>
      <stop offset="0.440625" stop-color="#f0f0f0"/>
      <stop offset="0.89375" stop-color="#e0e0e0"/>
    </linearGradient>
  </defs>
</svg>

滚动交叉检测逻辑 #

使用IntersectionObserver实现高性能的元素交叉状态检测，不需要监听scroll事件频繁触发重绘：

// React组件内示例代码
import { useRef, useEffect, useState } from 'react'

const Header = () => {
  const [isOverButton, setIsOverButton] = useState(false)
  const logoRef = useRef(null)
  const targetButtonRef = useRef(null) // 绑定你要检测的渐变按钮元素

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          // 当Logo和目标按钮发生交叉时，切换状态
          setIsOverButton(entry.isIntersecting)
        })
      },
      { threshold: 0.1 } // 交叉比例达到10%时触发回调，可自行调整
    )

    if (targetButtonRef.current) {
      observer.observe(targetButtonRef.current)
    }

    return () => {
      if (targetButtonRef.current) {
        observer.unobserve(targetButtonRef.current)
      }
    }
  }, [])

  return (
    <header>
      {/* 把上面修正后的SVG绑定到logoRef */}
      <svg ref={logoRef}>{/* 其余SVG内容 */}</svg>
      {/* 页面其他内容，目标渐变按钮绑定targetButtonRef */}
      <button ref={targetButtonRef} className="gradient-button">按钮</button>
    </header>
  )
}

可选优化 #

如果按钮渐变和Logo原有渐变接近，变色效果不明显，可以在isOverButton为true时，临时移除path的mixBlendMode: multiply属性，避免混合模式导致颜色显示异常。

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