reactjs - SVG在页面更改时变黑

Question

我从 icons8 下载了一个绿色啤酒杯的 SVG，用于我的网站徽标，并将其存储在项目的 public/assets 文件夹中。它是一个 NextJS（React 元框架）项目。

绝大多数情况下它都可以工作，但是由于某种原因，当我使用我的 iPhone（Chrome 和 Safari 浏览器）时，当我通过主页上的链接（一个 NextJS 内部链接，只需要用户到网站上的一个新页面），大部分 SVG 变成黑色 - 里面的几个小圆圈似乎没有受到影响，但其他一切都变黑了。

这是正常的，也就是它应该总是看起来的样子（抱歉，iPhone 屏幕截图太大）：

这是在路由到我们的 /discussion 页面后变得时髦的时候：

如果我们刷新页面，图标就会恢复正常，但显然我们不希望每次都刷新页面才能让它工作！

为了更好地衡量，next.config.js 文件如下所示：

module.exports = {
  images: {
    domains: ['prwhite.io.s3.amazonaws.com'],
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

这是实际的 SVG 文件：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32pt" height="32pt" viewBox="0 0 48 48" version="1.1">
<defs>
<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="144.881332" y1="100.333328" x2="51.16642" y2="100.333328" gradientTransform="matrix(0.27907,0,0,0.27907,0,0)">
<stop offset="0" style="stop-color:rgb(0%,0%,0%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(0%,38.431373%,1.176471%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="70.161667" y1="146.963257" x2="76.754997" y2="71.620079" gradientTransform="matrix(0.27907,0,0,0.27907,0,0)">
<stop offset="0" style="stop-color:rgb(18.039216%,80.000001%,44.313726%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(0%,38.431373%,1.176471%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="60.716" y1="-46.956001" x2="78.976669" y2="161.773163" gradientTransform="matrix(0.27907,0,0,0.27907,0,0)">
<stop offset="0" style="stop-color:rgb(18.039216%,80.000001%,44.313726%);stop-opacity:1;"/>
<stop offset="0.72" style="stop-color:rgb(10.196079%,73.725492%,61.176473%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(0%,38.431373%,1.176471%);stop-opacity:1;"/>
</linearGradient>
<radialGradient id="radial0" gradientUnits="userSpaceOnUse" cx="75.633423" cy="58.519421" fx="75.633423" fy="58.519421" r="55.491501" gradientTransform="matrix(0.27907,0,0,0.27907,0,0)">
<stop offset="0" style="stop-color:rgb(98.039216%,98.039216%,98.431373%);stop-opacity:1;"/>
<stop offset="0.293" style="stop-color:rgb(96.470588%,96.862745%,97.254902%);stop-opacity:1;"/>
<stop offset="0.566" style="stop-color:rgb(80.000001%,80.000001%,80.000001%);stop-opacity:1;"/>
<stop offset="0.832" style="stop-color:rgb(84.705883%,86.274511%,87.450981%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(78.431374%,80.392158%,81.960785%);stop-opacity:1;"/>
</radialGradient>
</defs>
<g id="surface9152533">
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 39 21 L 39 35 L 32 35 L 32 21 L 39 21 M 39 18 L 32 18 C 30.34375 18 29 19.34375 29 21 L 29 35 C 29 36.65625 30.34375 38 32 38 L 39 38 C 40.65625 38 42 36.65625 42 35 L 42 21 C 42 19.34375 40.65625 18 39 18 Z M 39 18 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 8 21 L 33 21 L 33 40 L 8 40 Z M 8 21 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 13 24 C 11.894531 24 11 24.894531 11 26 C 11 27.105469 11.894531 28 13 28 C 14.105469 28 15 27.105469 15 26 C 15 24.894531 14.105469 24 13 24 Z M 13 24 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 13.5 34 C 12.671875 34 12 34.671875 12 35.5 C 12 36.328125 12.671875 37 13.5 37 C 14.328125 37 15 36.328125 15 35.5 C 15 34.671875 14.328125 34 13.5 34 Z M 13.5 34 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 28.5 28 C 27.671875 28 27 28.671875 27 29.5 C 27 30.328125 27.671875 31 28.5 31 C 29.328125 31 30 30.328125 30 29.5 C 30 28.671875 29.328125 28 28.5 28 Z M 28.5 28 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 19 29 C 18.449219 29 18 29.449219 18 30 C 18 30.550781 18.449219 31 19 31 C 19.550781 31 20 30.550781 20 30 C 20 29.449219 19.550781 29 19 29 Z M 19 29 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 24 34 C 23.449219 34 23 34.449219 23 35 C 23 35.550781 23.449219 36 24 36 C 24.550781 36 25 35.550781 25 35 C 25 34.449219 24.550781 34 24 34 Z M 24 34 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 8 40 L 8 42 C 8 43.105469 8.894531 44 10 44 L 31 44 C 32.105469 44 33 43.105469 33 42 L 33 40 Z M 8 13 L 33 13 L 33 21 L 8 21 Z M 8 13 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial0);" d="M 34.910156 9.265625 C 34.6875 8.3125 33.960938 7.519531 33.042969 7.1875 C 32.210938 6.886719 31.429688 6.972656 30.765625 7.269531 C 30.269531 5.945312 29 5 27.5 5 C 26.839844 5 26.230469 5.191406 25.707031 5.507812 C 25.113281 4.039062 23.679688 3 22 3 C 20.882812 3 19.871094 3.460938 19.144531 4.203125 C 18.246094 2.875 16.726562 2 15 2 C 12.238281 2 10 4.238281 10 7 C 10 7.066406 10.015625 7.125 10.019531 7.191406 C 9.296875 6.925781 8.464844 6.882812 7.542969 7.417969 C 6.769531 7.863281 6.179688 8.628906 6.039062 9.511719 C 5.800781 11.023438 6.695312 12.351562 8 12.816406 L 8 13 L 13.007812 13 C 13.570312 14.179688 15.113281 15 16.507812 15 C 17.898438 15 19.441406 14.179688 20.007812 13 L 20.613281 13 C 21.378906 13 22 13.621094 22 14.386719 L 22 17.5 C 22 18.328125 22.671875 19 23.5 19 C 24.328125 19 25 18.328125 25 17.5 L 25 23.5 C 25 24.328125 25.671875 25 26.5 25 C 27.328125 25 28 24.328125 28 23.5 L 28 13 L 33 13 L 33 12.816406 C 34.375 12.328125 35.296875 10.878906 34.910156 9.265625 Z M 34.910156 9.265625 "/>
</g>
</svg>

我们需要英雄！任何帮助是极大的赞赏。

标签： reactjssvgnext.js