Блог

Главная - Вопросы по программированию - SVG становится черным при смене страницы

SVG становится черным при смене страницы

#reactjs #svg #next.js

#reactjs #svg #next.js

Вопрос:

Я загрузил SVG-изображение зеленой пивной кружки из icons8, которое я использую для логотипа моего веб-сайта, и оно хранится в папке public / assets в моем проекте. Это проект NextJS (React meta-framework).

В подавляющем большинстве случаев это работает, но по какой-то причине, когда я нахожусь на своем iPhone (в браузерах Chrome и Safari), когда я перехожу на новую страницу по ссылке на моей домашней странице (внутренняя ссылка NextJS, которая просто переводит пользователя на новую страницу сайта), большинствоSVG становится черным — несколько крошечных кругов внутри него кажутся незатронутыми, но все остальное становится темным.

Здесь все как обычно, то есть так, как оно всегда должно выглядеть (извините за слишком большие снимки экрана iPhone):

введите описание изображения здесь

И вот это происходит, когда он становится напуганным после маршрутизации на нашу страницу / обсуждения:

введите описание изображения здесь

Если мы обновим страницу, значок вернется к нормальному состоянию, но, очевидно, мы не хотим обновлять страницу, чтобы заставить ее работать каждый раз!

Для хорошей оценки, вот что 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>

Нам нужен герой! Любая помощь приветствуется.

Комментарии:

1. использует ли ваша страница обсуждения тег <base> ? Webkit рассматривает их как влияющие на ссылки пути, которые, вероятно, приведут к поломке, которую вы видите, когда ваш веб-пакет вставляет ваш SVG, а не включает его в качестве изображения.

2. нет, насколько мне известно. Но да, похоже, это проблема только на этой странице… настолько верно, что проблема должна быть в странице, а не в svg