0 голосов
 
632 просмотра
26.12.2020 / 13:55  wRadchuk

SVG спрайты о которых я раньше не знал...

HTML CSS SVG Sprite Спрайт
В процессе изучения CSS решил сверстать бесплатный макет ActiveBox по видео-уроку с YouTube. Автор видео-уроков использовал в верстке блока с командой SVG спрайты о которых я раньше не знал. При запуске в Google Chrome на локальной машине всё работает как часы, но как только выгрузил на хостинг начались сюрпризы. Тот же Google Chrome перестал отображать SVG спрайты, но Яндекс Браузер их видит. Решил кинуть ссылку знакомым и оказалось что у некоторых Яндекс видит SVG (в том числе и у меня), а у некоторых не видит. Та же история и с Google Chrome.

Ниже привожу разметку с подключением SVG спрайтов:
Открыть спойлер

А вот разметка с использованием в блоке Team:
Открыть спойлер

Так же сайт доступен по адресу https://radchuk.site/#team

Cкрин сайта с Yandex.Browser:
https://radchuk.site/YandexScreen.jpg

Cкрин сайта с Google Chrome:
https://radchuk.site/ChromeScreen.jpg


Кто нибудь может объяснить мне что не так с SVG? Заранее спасибо...

З.Ы. На всякий прикрепил index.html
index.html (19.17 кб.)
26.12.2020 / 18:48  wRadchuk
Я выяснил в чем была проблема. Всему виной любимец AdGuard Антибаннер. Я отключил его для своего сайта в Яндексе, а в Google Chrome нет. У моего знакомого всё работает в Яндексе из-за отсутствия защиты. Теперь мой Google Chrome тоже видит спрайты SVG. Проблема решина, но тем нимение при верстке сайта с применением SVG есть риск что пользователи сайта не увидят эти самые SVG если у них в силу каких либо обстоятельств есть AdGuard (или аналоги). Быть может кто то столкнется с моей проблемой и най
26.12.2020 / 18:51  wRadchuk
...дет это решение. Так что вопрос закрыт. Отдельная благодарность Веб демону за указание на проблему с шрифтом...
Ответы
 
2 голоса
 
# 26.12.2020 / 14:22  web_demon
Проверил в ГуглХроме и Мозилле - все показывается. Яндекс браузер ставить не буду, по религиозным соображениям.

Плюс, инструменты разработчика указывают на ошибку тут:
  1. <link href="https://fonts.googleapis.com/css2?family=Cardo:ital@1&family=Open+Sans:wght@700&family=Raleway:wght@300,400;600;700&display=swap" rel="stylesheet">

от тут запятая закралась вместо двоеточия:
wght@300,400;600;700

Соответственно гугл шрифты не загружаются.
26.12.2020 / 15:36  wRadchuk
Спасибо, исправил. Отлично что у вас работают иконки, но у меня проблема осталась... Так как ваш ответ был решением другой проблемы... Это шрифт для заголовка в блоке Download:
  1. .download__title {
  2.     font-size: 28px;
  3.     font-weight: 300;
  4.     color: #2d3033;
  5.  
  6.     margin-bottom: 15px;
  7. }
Всего: 1

Реклама

Мы в соцсетях

tw tg yt gt