проблема с SVG. Помогите понять в чем причина.

[nikoshot]

Всем привет! Помогите разобраться.. ни как не могу понять в чем причина..

Значит в карточке товара есть иконки вайбер, телеграм и инстаграмм..

В пк версии все норм.. Но в мобильной иконка инстаграмма пропадает заливка.. 

Смотрел код css и тд.. ничего не могу понять.. 

Хотя та же самая иконка с тем же кодом нормально отображается в открытом меню...

https://m-fashion.com.ua/goluboe-shelkovoe-plate-kombinaciya-na-bretelkah

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

Всем спасибо!

[buslikdrev]

У меня работает - значит кэш.

А ещё SVG нужно подключать файлом, как изображение.

[ibond]

18.06.2022 в 00:29, nikoshot сказал:

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

смените ID в данном SVG на другой

<radialGradient id="a" .... 9901196.048448" fill="url(#a)"></path>

например на

<radialGradient id="a2" .... 9901196.048448" fill="url(#a2)"></path>

 

 

UPDATE:

правильней будет сделать так, как сделано с вайбером и телегой -- засунуть этот код в спрайт и доставать его от туда:

Скрытый текст

view-source:https://m-fashion.com.ua/sprite.svg

<symbol version="1.1" viewBox="0 0 16 16" id="svg__icon_instagram">
            <radialGradient id="icon_instagram" cx="13.286131%" cy="100.4724%" r="130.546822%">
                <stop offset=".09" stop-color="#fa8f21"></stop>
                <stop offset=".78" stop-color="#d82d7e"></stop>
            </radialGradient>
            <path d="m5.33397336 8c0-1.472704 1.19358374-2.66688 2.66634665-2.66688s2.66698669 1.194176 2.66698669 2.66688-1.19422378 2.66688-2.66698669 2.66688-2.66634665-1.194176-2.66634665-2.66688m-1.44172167 0c0 2.2688 1.83917757 4.107904 4.10806832 4.107904 2.26889079 0 4.10806829-1.839104 4.10806829-4.107904s-1.8391775-4.107904-4.10806829-4.107904c-2.26889075 0-4.10806832 1.839104-4.10806832 4.107904m7.41872871-4.270784c-.000212.5301933.4294399.96017178.9596544.96038385.5302145.00021206.9602102-.4294226.9604223-.9596159s-.4294397-.96017183-.9596542-.96038395h-.0003841c-.5299623.00024699-.9595793.42967504-.9600384.959616m-6.54278967 10.782592c-.7799992-.03552-1.20395216-.16544-1.48569143-.2752-.37351894-.145408-.6400256-.318592-.92022881-.5984s-.45365015-.546048-.59842394-.919552c-.10982839-.2816-.23975359-.705664-.275211-1.485632-.03878556-.843264-.04652987-1.096576-.04652987-3.23296s.00838434-2.388992.04652987-3.23296c.03552142-.779968.16640665-1.2032.275211-1.485632.14541382-.373504.31860475-.64.59842394-.920192s.54606984-.453632.92022881-.5984c.28161126-.109824.70569223-.239744 1.48569143-.2752.84329773-.038784 1.09661986-.046528 3.23212928-.046528 2.13550939 0 2.38908759.008384 3.23308929.046528.7799992.03552 1.2032482.1664 1.4856915.2752.3735189.144768.6400256.318592.9202288.5984s.4530101.546688.5984239.920192c.1098284.2816.2397536.705664.275211 1.485632.0387856.843968.0465299 1.096576.0465299 3.23296s-.0077443 2.388992-.0465299 3.23296c-.0355214.779968-.1660866 1.203904-.275211 1.485632-.1454138.373504-.3186047.64-.5984239.919552s-.5467099.452992-.9202288.5984c-.2816113.109824-.7056923.239744-1.4856915.2752-.8432977.038784-1.0966198.046528-3.23308929.046528-2.13646946 0-2.38908756-.007744-3.23212928-.046528m-.06624265-14.46336c-.85168207.038784-1.43365735.173824-1.94190168.371584-.52635705.204224-.97194288.478208-1.41720869.922752s-.71855674.890816-.92278891 1.417152c-.19776791.508544-.33281331 1.090176-.37159886 1.941824-.03942558.852992-.04844994 1.125696-.04844994 3.29824s.00902436 2.445248.04844994 3.29824c.03878555.851712.17383095 1.43328.37159886 1.941824.20423217.526016.47758711.9728.92278891 1.417152.44520181.444352.89085164.717952 1.41720869.922752.50920437.19776 1.09021961.3328 1.94190168.371584.85347414.038784 1.12574103.048448 3.29837193.048448 2.17263089 0 2.44534579-.009024 3.29837189-.048448.8517461-.038784 1.4333374-.173824 1.9419017-.371584.5260371-.2048.9719429-.478208 1.4172087-.922752s.7179807-.891136.9227889-1.417152c.1977679-.508544.3334534-1.090176.3715989-1.941824.0387855-.853632.0478099-1.125696.0478099-3.29824s-.0090244-2.445248-.0478099-3.29824c-.0387856-.851712-.173831-1.4336-.3715989-1.941824-.2048082-.526016-.4782271-.971904-.9227889-1.417152s-.8911716-.718528-1.4165687-.922752c-.5092043-.19776-1.0908596-.33344-1.9419016-.371584-.8530261-.038784-1.1257411-.048448-3.29837196-.048448-2.17263091 0-2.44553782.009024-3.29901196.048448" fill="url(#icon_instagram)"/>
        </symbol>

 

и в шаблоне достаем

<svg class="svg" width="20" height="20"><use xlink:href="sprite.svg#svg__icon_instagram" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>

 

[nikoshot]

18.06.2022 в 00:57, buslikdrev сказал:

А ещё SVG нужно подключать файлом, как изображение.

Если не сложно.. можете скинуть где про это почитать? Почему именно лучше подключать как изображение?

[nikoshot]

18.06.2022 в 06:46, ibond сказал:

смените ID в данном SVG на другой

Сменил и все заработало... Спасибо!

 

18.06.2022 в 06:46, ibond сказал:

правильней будет сделать так, как сделано с вайбером и телегой -- засунуть этот код в спрайт и доставать его от туда:

Пробовал так раньше и сейчас ваш код.. но он не срабатывает...

[ibond]

18.06.2022 в 19:26, nikoshot сказал:

Почему именно лучше подключать как изображение?

тоже интересно

 

18.06.2022 в 19:27, nikoshot сказал:

Пробовал так раньше и сейчас ваш код.. но он не срабатывает...

ну я на глаз код писал, доступов к исходному нет, возможно где-то ошибка, тут уже смотреть надо

но вы можете взять за пример другие соцсети и сделать точь в точь

 

UPDATE

хотя не вижу ошибки

[buslikdrev]

18.06.2022 в 18:26, nikoshot сказал:

Если не сложно.. можете скинуть где про это почитать? Почему именно лучше подключать как изображение?

Захотите закэшировать страницу, то + к кэшу страницы товара. Например, 20 кб * на 10000 товара = 200мб отнимет памяти на сервере. Плюс браузеры кэшировать не будут изображение, а кэшировать html нельзя браузерами. Другое дело как изображение подключить и атрибут loading="lazy" будет работать, если поставите.