Как заставить хром показать градиент в svg спрайте?

Question

[Антон Антон]

Вот пример:
https://codesandbox.io/s/peaceful-tamas-c7ovc

В файрфоксе отображается нормально, а в хроме та иконка, которая ссылается на градиент - отображается без градиента.
Как сделать так, чтобы в хроме получить такой же результат, как в файрфоксе?

картинки

firefox:

chrome:

Answer 1

[twobomb]

Чёто ты херни наделал, symbol вообще не должен отображаться это типа как defs, типа переменная которую можно многократно использовать. Нужно типа такого

<svg fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="ig" x1="5.7886" y1="29.2114" x2="27.6465" y2="7.35349"
      gradientUnits="userSpaceOnUse">
      <stop stop-color="#FEE411" />
      <stop offset="0.0518459" stop-color="#FEDB16" />
      <stop offset="0.1381" stop-color="#FEC125" />
      <stop offset="0.2481" stop-color="#FE983D" />
      <stop offset="0.3762" stop-color="#FE5F5E" />
      <stop offset="0.5" stop-color="#FE2181" />
      <stop offset="1" stop-color="#9000DC" />
    </linearGradient>
  </defs>
  <symbol id="telegram" viewBox="0 0 35 35">
    <path
      d="M17.5 35C27.165 35 35 27.165 35 17.5C35 7.83502 27.165 0 17.5 0C7.83502 0 0 7.83502 0 17.5C0 27.165 7.83502 35 17.5 35Z"
      fill="#039BE5" />
    <path
      d="M8.00772 17.1208L24.8806 10.6152C25.6638 10.3323 26.3477 10.8063 26.094 11.9904L26.0954 11.989L23.2225 25.5238C23.0096 26.4833 22.4394 26.7167 21.6417 26.2646L17.2667 23.0402L15.1565 25.0731C14.9231 25.3065 14.7263 25.5033 14.2742 25.5033L14.5848 21.051L22.6931 13.7258C23.0461 13.4152 22.6144 13.2402 22.1492 13.5494L12.129 19.8581L7.80939 18.5106C6.87168 18.2131 6.85127 17.5729 8.00772 17.1208Z"
      fill="white" />
  </symbol>
  <symbol id="instagram" viewBox="0 0 35 35">
    <path
      d="M17.5 32.8809C25.9946 32.8809 32.8809 25.9946 32.8809 17.5C32.8809 9.00539 25.9946 2.11914 17.5 2.11914C9.00539 2.11914 2.11914 9.00539 2.11914 17.5C2.11914 25.9946 9.00539 32.8809 17.5 32.8809Z"
      fill="url(#ig)">
    </path>
    <path
      d="M20.7676 8.95508H14.2393C11.3271 8.95508 8.96191 11.3203 8.96191 14.2324V20.7607C8.96191 23.6729 11.3271 26.0381 14.2393 26.0381H20.7676C23.6797 26.0381 26.0449 23.6729 26.0449 20.7607V14.2324C26.0449 11.3203 23.6797 8.95508 20.7676 8.95508ZM24.1377 20.7676C24.1377 22.627 22.627 24.1445 20.7607 24.1445H14.2324C12.373 24.1445 10.8555 22.6338 10.8555 20.7676V14.2393C10.8555 12.3799 12.3662 10.8623 14.2324 10.8623H20.7607C22.6201 10.8623 24.1377 12.373 24.1377 14.2393V20.7676Z"
      fill="white" />
    <path
      d="M17.5 13.1318C15.0937 13.1318 13.1318 15.0937 13.1318 17.5C13.1318 19.9063 15.0937 21.8682 17.5 21.8682C19.9062 21.8682 21.8682 19.9063 21.8682 17.5C21.8682 15.0937 19.9062 13.1318 17.5 13.1318ZM17.5 20.1523C16.0371 20.1523 14.8477 18.9629 14.8477 17.5C14.8477 16.0371 16.0371 14.8477 17.5 14.8477C18.9629 14.8477 20.1523 16.0371 20.1523 17.5C20.1523 18.9629 18.9629 20.1523 17.5 20.1523Z"
      fill="white" />
    <path
      d="M22.201 13.6107C22.6035 13.5455 22.8768 13.1663 22.8116 12.7639C22.7463 12.3615 22.3672 12.0881 21.9648 12.1534C21.5623 12.2186 21.289 12.5977 21.3542 13.0002C21.4194 13.4026 21.7986 13.676 22.201 13.6107Z"
      fill="white" />
    
  </symbol>
  
    <use x="0" y="0" width="50" height="50"  xlink:href="#telegram" />    
    <use x="0" y="50" width="50" height="50"  xlink:href="#instagram" />    
</svg>

Comments

[Антон Антон]

В одном файле как картинка - работает. Мне же нужно эти иконки вставлять в куче мест. по ссылке минимальный пример, в firefox:

в chrome:

последняя картинка (маленькая) чтобы убедиться, что градиент вообще рабочий.

[twobomb]

Антон Антон, Вставлять в куче мест вам нужно что? Svg файл или Symbol в svg файле?

[Антон Антон]

twobomb, символ. один раз загружается пакет иконок, по всему проекту используется.

[twobomb]

Антон Антон, что вы имеете ввиду под слово символ, просто в моем понимании Symbox это тег, некий контейнер для объекта который может использоваться в пределах одного SVG файла.
Если символ это икона(весь svg), то сделайте 2 свгшки одну телеграм другую инстаграм и используйте их где хотите

[twobomb]

Файлы

instagram.svg

<svg fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="ig" x1="5.7886" y1="29.2114" x2="27.6465" y2="7.35349"
      gradientUnits="userSpaceOnUse">
      <stop stop-color="#FEE411" />
      <stop offset="0.0518459" stop-color="#FEDB16" />
      <stop offset="0.1381" stop-color="#FEC125" />
      <stop offset="0.2481" stop-color="#FE983D" />
      <stop offset="0.3762" stop-color="#FE5F5E" />
      <stop offset="0.5" stop-color="#FE2181" />
      <stop offset="1" stop-color="#9000DC" />
    </linearGradient>
  </defs>
    <path
      d="M17.5 32.8809C25.9946 32.8809 32.8809 25.9946 32.8809 17.5C32.8809 9.00539 25.9946 2.11914 17.5 2.11914C9.00539 2.11914 2.11914 9.00539 2.11914 17.5C2.11914 25.9946 9.00539 32.8809 17.5 32.8809Z"
      fill="url(#ig)">
    </path>
    <path
      d="M20.7676 8.95508H14.2393C11.3271 8.95508 8.96191 11.3203 8.96191 14.2324V20.7607C8.96191 23.6729 11.3271 26.0381 14.2393 26.0381H20.7676C23.6797 26.0381 26.0449 23.6729 26.0449 20.7607V14.2324C26.0449 11.3203 23.6797 8.95508 20.7676 8.95508ZM24.1377 20.7676C24.1377 22.627 22.627 24.1445 20.7607 24.1445H14.2324C12.373 24.1445 10.8555 22.6338 10.8555 20.7676V14.2393C10.8555 12.3799 12.3662 10.8623 14.2324 10.8623H20.7607C22.6201 10.8623 24.1377 12.373 24.1377 14.2393V20.7676Z"
      fill="white" />
    <path
      d="M17.5 13.1318C15.0937 13.1318 13.1318 15.0937 13.1318 17.5C13.1318 19.9063 15.0937 21.8682 17.5 21.8682C19.9062 21.8682 21.8682 19.9063 21.8682 17.5C21.8682 15.0937 19.9062 13.1318 17.5 13.1318ZM17.5 20.1523C16.0371 20.1523 14.8477 18.9629 14.8477 17.5C14.8477 16.0371 16.0371 14.8477 17.5 14.8477C18.9629 14.8477 20.1523 16.0371 20.1523 17.5C20.1523 18.9629 18.9629 20.1523 17.5 20.1523Z"
      fill="white" />
    <path
      d="M22.201 13.6107C22.6035 13.5455 22.8768 13.1663 22.8116 12.7639C22.7463 12.3615 22.3672 12.0881 21.9648 12.1534C21.5623 12.2186 21.289 12.5977 21.3542 13.0002C21.4194 13.4026 21.7986 13.676 22.201 13.6107Z"
      fill="white" />
  
</svg>

telegram.svg

<svg fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
    <path
      d="M17.5 35C27.165 35 35 27.165 35 17.5C35 7.83502 27.165 0 17.5 0C7.83502 0 0 7.83502 0 17.5C0 27.165 7.83502 35 17.5 35Z"
      fill="#039BE5" />
    <path
      d="M8.00772 17.1208L24.8806 10.6152C25.6638 10.3323 26.3477 10.8063 26.094 11.9904L26.0954 11.989L23.2225 25.5238C23.0096 26.4833 22.4394 26.7167 21.6417 26.2646L17.2667 23.0402L15.1565 25.0731C14.9231 25.3065 14.7263 25.5033 14.2742 25.5033L14.5848 21.051L22.6931 13.7258C23.0461 13.4152 22.6144 13.2402 22.1492 13.5494L12.129 19.8581L7.80939 18.5106C6.87168 18.2131 6.85127 17.5729 8.00772 17.1208Z"
      fill="white" />
  
</svg>

[Антон Антон]

twobomb, символ - это тег. при использовании как у меня по ссылке - можно сделать один свг файл из кучи маленьких и использовать так, как показано по ссылке (вставлять в html много раз одно и то же, разными цветами и вообще кучу всего делать). Две свг будут грузиться дольше и сожмутся при передаче хуже. К тому же, если вставлять как img, то нельзя будет менять стили (в этом примере нет, но в ральном проекте есть куча "одноцветных" и "многоцветных" иконок, у которых меняется заливка стилем снаружи от иконки). Если же всё инлайнить сборщиком, то будет трафик большой при загрузке.

[Антон Антон]

Немного обновил пример, чтобы было понятно, о чем я говорю:
файрфокс:

хром:

[twobomb]

Антон Антон, та понял я понял, крч нашёл несколько сурсов
сурс1 сурс2
Ну ты наверно пытаешься загружать спрайты типа такого

<svg width="50" height="50" >
	<use href="my_svg_file.svg#instagram" width="50" height="50" />
</svg>

Ну выход будет такой что на каждой странице тебе нужно будет вставлять код этого svg, скрывать его без использования display:none и потом уже использовать. Вот примерно так это будет выгладеть в твоем случае

какойто код сайта
.....
..
..
<div style="height: 0; width: 0; position: absolute; visibility: hidden;"  >
<svg fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
	<linearGradient id="ig" x1="5.7886" y1="29.2114" x2="27.6465" y2="7.35349"
      gradientUnits="userSpaceOnUse">
      <stop stop-color="#FEE411" />
      <stop offset="0.0518459" stop-color="#FEDB16" />
      <stop offset="0.1381" stop-color="#FEC125" />
      <stop offset="0.2481" stop-color="#FE983D" />
      <stop offset="0.3762" stop-color="#FE5F5E" />
      <stop offset="0.5" stop-color="#FE2181" />
      <stop offset="1" stop-color="#9000DC" />
    </linearGradient>
  <symbol id="telegram" viewBox="0 0 35 35">
    <path
      d="M17.5 35C27.165 35 35 27.165 35 17.5C35 7.83502 27.165 0 17.5 0C7.83502 0 0 7.83502 0 17.5C0 27.165 7.83502 35 17.5 35Z"
      fill="#039BE5" />
    <path
      d="M8.00772 17.1208L24.8806 10.6152C25.6638 10.3323 26.3477 10.8063 26.094 11.9904L26.0954 11.989L23.2225 25.5238C23.0096 26.4833 22.4394 26.7167 21.6417 26.2646L17.2667 23.0402L15.1565 25.0731C14.9231 25.3065 14.7263 25.5033 14.2742 25.5033L14.5848 21.051L22.6931 13.7258C23.0461 13.4152 22.6144 13.2402 22.1492 13.5494L12.129 19.8581L7.80939 18.5106C6.87168 18.2131 6.85127 17.5729 8.00772 17.1208Z"
      fill="white" />
  </symbol>

  <symbol id="instagram" viewBox="0 0 35 35">    
    <path
      d="M17.5 32.8809C25.9946 32.8809 32.8809 25.9946 32.8809 17.5C32.8809 9.00539 25.9946 2.11914 17.5 2.11914C9.00539 2.11914 2.11914 9.00539 2.11914 17.5C2.11914 25.9946 9.00539 32.8809 17.5 32.8809Z"
      fill="url(#ig)">
    </path>
    <path
      d="M20.7676 8.95508H14.2393C11.3271 8.95508 8.96191 11.3203 8.96191 14.2324V20.7607C8.96191 23.6729 11.3271 26.0381 14.2393 26.0381H20.7676C23.6797 26.0381 26.0449 23.6729 26.0449 20.7607V14.2324C26.0449 11.3203 23.6797 8.95508 20.7676 8.95508ZM24.1377 20.7676C24.1377 22.627 22.627 24.1445 20.7607 24.1445H14.2324C12.373 24.1445 10.8555 22.6338 10.8555 20.7676V14.2393C10.8555 12.3799 12.3662 10.8623 14.2324 10.8623H20.7607C22.6201 10.8623 24.1377 12.373 24.1377 14.2393V20.7676Z"
      fill="white" />
    <path
      d="M17.5 13.1318C15.0937 13.1318 13.1318 15.0937 13.1318 17.5C13.1318 19.9063 15.0937 21.8682 17.5 21.8682C19.9062 21.8682 21.8682 19.9063 21.8682 17.5C21.8682 15.0937 19.9062 13.1318 17.5 13.1318ZM17.5 20.1523C16.0371 20.1523 14.8477 18.9629 14.8477 17.5C14.8477 16.0371 16.0371 14.8477 17.5 14.8477C18.9629 14.8477 20.1523 16.0371 20.1523 17.5C20.1523 18.9629 18.9629 20.1523 17.5 20.1523Z"
      fill="white" />
    <path
      d="M22.201 13.6107C22.6035 13.5455 22.8768 13.1663 22.8116 12.7639C22.7463 12.3615 22.3672 12.0881 21.9648 12.1534C21.5623 12.2186 21.289 12.5977 21.3542 13.0002C21.4194 13.4026 21.7986 13.676 22.201 13.6107Z"
      fill="white" />	
  </symbol> 
</svg>
</div>
...
какойто код сайта

место где нужна иконка телеги
<svg width="50" height="50" >
	<use href="#telegram" width="50" height="50" />
</svg>
...

...
место где нужна иконка инсты
<svg width="50" height="50" >
	<use href="#instagram" width="50" height="50" />
</svg>

Answer 2

[Никита Геннадич]

Судя по всему это какой-то баг хрома, вроде как давно известный (предполагаю этот: https://bugs.chromium.org/p/chromium/issues/detail...), но с ним ничего не делают...

Причём проблема именно в хроме, и конкретно с атрибутами filter | fill | stroke | clip-path | mask и т.п. Во всех таких примерах используется конструкция вида fill="url(#toncloutLogoGradient)", которая ссылается на айдишник linearGradient. Но что-то решать этот баг никто не торопится.

Подписался на вопрос, буду рад, если кто-то поделится решением.

Comments

[Антон Антон]

Вроде бы обошел это использованием не внешнего svg-sprite, а инлайнового.

[Никита Геннадич]

Антон Антон, ну понятно там ноги растут из того как браузер обрабатывает вставку на страницу, но это не решение. Если спрайт в пару сотен килобайт это не вариант.

[Антон Антон]

Никита Геннадич, его js'ом можно вставлять, как всякие вебпаки и вити делают порой