Перейти к публикации
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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


nikoshot
 Погделиться

Рекомендованные сообещёния

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

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

image.png.c18c46c9a201409ff6eb948ba090e5a9.png

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

image.png.ce6b13aa54d0a6ffc353f7d21d04d250.png

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

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

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

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

Всем спасипотому что!

Ссылка на комменирий
Погделиться на других сайих


У меня рилииет - зналит кэш.

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

Ссылка на комменирий
Погделиться на других сайих

  17.06.2022 в 21:29, nikoshot сказал:

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

Раскрыть  

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

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

например на

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

 

 

UPDATE:

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

  Показать содержимое
<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
Ссылка на комменирий
Погделиться на других сайих

  17.06.2022 в 21:57, buslikdrev сказал:

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

Раскрыть  

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

Ссылка на комменирий
Погделиться на других сайих


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

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

Раскрыть  

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

 

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

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

Раскрыть  

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

Ссылка на комменирий
Погделиться на других сайих


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

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

Раскрыть  

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

 

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

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

Раскрыть  

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

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

 

UPDATE

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

Ссылка на комменирий
Погделиться на других сайих

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

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

Раскрыть  

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

Ссылка на комменирий
Погделиться на других сайих

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы осивить комменирий

Создать аккаунт

Зарегистрируйтесь для получения аккауни. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите згдесь.

Войти сейчас
 Погделиться

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обрилитка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфигденциальности.