Chrome 与 Firefox 中的 SVG feDiffuseLighting

Question

问候。 我遇到了奇怪的问题 我有带有 svg 过滤器的 next.js 项目（默认配置）

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id='roughpaper'>
        <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>

然后像这样导入

import styled from 'styled-components';

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

参考这里 它在 Chrome 和 Firefox 中对我来说工作正常（看起来像白皮书）

但是在下一个项目中会有很大的差异。 对于 Firefox，它看起来像

对于 Chrome 就像

有谁知道，为什么会这样？

我已经尝试设置 color-interpolation-filters="sRGB"，但它没有任何改变。

Answer 1

嗯，我测试了不同的解决方案。唯一能正常工作的就是将此 svg 放入页面的 html 代码中，而不是从外部导入它。看起来 next.js 存在一些问题，应该以其他方式导入它。还没找到合适的。