Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


 Share

Recommended Posts

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

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

image.png.c18c46c9a201409ff6eb948ba090e5a9.png

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

image.png.ce6b13aa54d0a6ffc353f7d21d04d250.png

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

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

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

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

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

Link to comment
Share on other sites


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>

 

  • +1 1
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites


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

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

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

 

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

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

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

Link to comment
Share on other sites


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

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

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

 

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

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

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

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

 

UPDATE

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.