Chrome与Firefox中SVG feDiffuseLighting在Next.js项目中的表现差异求助

问题核心 #

外部SVG滤镜在Next.js静态资源加载机制下，受资源加载时机、路径解析逻辑及浏览器滤镜上下文差异影响，导致Chrome和Firefox中表现与Codepen内联环境不一致。

解决步骤 #

1. 将SVG滤镜内联到组件中 #

外部文件引用是主要诱因，内联滤镜可避免资源加载和解析问题：

import styled from 'styled-components';

export const Paper = styled.img`
  position: absolute;
  width: 100%;
  height: 100%;
  filter: url(#roughpaper);
  opacity: 0.5;
`;

// 在使用Paper的页面/组件中插入内联SVG
export default function TargetPage() {
  return (
    <div>
      {/* 隐藏SVG容器，仅保留滤镜定义 */}
      <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
        <filter id='roughpaper' color-interpolation-filters="sRGB">
          <feTurbulence type="fractalNoise" baseFrequency='0.02' result='noise' numOctaves="5" />
          <feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'>
            <feDistantLight azimuth='45' elevation='60' />
          </feDiffuseLighting>
        </filter>
      </svg>
      <Paper src="/your-target-image.jpg" />
    </div>
  );
}

2. 验证外部SVG路径（若坚持使用外部文件） #

• 确保SVG文件放在public/filters目录下，与引用路径/filters/paper.svg完全匹配
• 打开浏览器控制台，确认SVG文件返回200状态（无加载失败）
• 给SVG添加width="0" height="0"，避免渲染占位空间

3. 检查图片元素有效性 #

确认Paper组件的img标签有有效src属性，空图或加载失败会导致滤镜效果异常，也是跨浏览器表现差异的常见诱因。

4. 强制统一色彩空间 #

在内联滤镜中明确添加color-interpolation-filters="sRGB"，强制浏览器使用标准色彩空间解析滤镜，减少跨浏览器渲染差异。

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