Использование SVG с медиа-запросами

Использование SVG с медиа-запросами

От автора: с помощью HTML-документов мы можем отображать, скрывать или реорганизовать части страницы в зависимости от условий окна просмотра. Если, например, окно браузера имеет ширину 480 пикселей, мы можем изменить панель навигации с горизонтальной на вертикальную. Мы можем сделать что-то подобное, используя медиа запросы CSS и документы SVG. Рассмотрим, например, логотип вымышленной компании Hexagon Web Design & Development ниже.

Без медиа-запросов этот SVG-логотип будет просто растягиваться или сжиматься, чтобы соответствовать окну просмотра или его контейнеру. Но с помощью медиа-запросов мы можем сделать больше.

Давайте разберем область просмотра HTML-документов и окно просмотра SVG-документов. Когда SVG встроен, окно просмотра HTML и окно просмотра SVG являются одними и теми же. Документ SVG ведет себя как любой другой элемент HTML. С другой стороны, когда SVG-документ связан как с объектом, так и с элементами img, мы имеем дело с окном просмотра SVG-документа.

Медиа-запросы работают в обоих случаях, но когда SVG-документ связан, его окно просмотра не зависит от HTML-документа. В этом случае размер окна браузера не определяет размер окна просмотра SVG. Вместо этого размер окна просмотра определяется размерами объекта, iframe или img. Возьмем в качестве примера (сокращенный) SVG-документ:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В меньших окнах просмотра давайте покажем только H в виде шестиугольника:

Теперь, когда наш контейнер SVG меньше или равен 20em, будет отображаться только часть символа нашего логотипа, как показано ниже.

Чтобы запустить это представление из HTML-документа, установите ширину контейнера SVG:

Как вы могли заметить, SVG-изображение сохраняет свои внутренние размеры, хотя часть его скрыта. Это, к сожалению, является ограничением SVG. Чтобы исправить это, нам нужно изменить атрибут viewBox документа SVG, но только тогда, когда область просмотра меньше определенного размера. Это отличный вариант для matchMedia.

Атрибут viewBox, как следует из его названия, определяет видимую область элемента SVG. Скорректировав его, мы можем определить, какая часть изображения SVG заполняет окно просмотра. Ниже приведен пример использования matchMedia и медиа-запроса для обновления атрибута viewBox:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Примечание. Браузеры немного бесполезны, когда дело доходит до обработки события SVGLoad. В моих тестах addEventListener работал наиболее последовательно с Firefox. Для достижения наилучших результатов в Chrome и Safari используйте атрибут события onload. Microsoft Edge также лучше всего работает с onload, но только при использовании в качестве атрибута тега svg. Другими словами, <svg onload = «updateViewBox»>.

Теперь, когда контейнер SVG равен 20em или меньше, значение viewBox будет «0 0 200 174». Когда он превысит 20em, viewBox будет восстановлен до его начального значения, как показано ниже.

Поскольку этот метод использует либо атрибут события onload, либо событие SVGLoad, рекомендуется вставлять CSS и JavaScript в SVG-файл. Когда CSS является внешним, событие SVGLoad может срабатывать, прежде чем связанный с ним CSS завершит загрузку.

Использование медиа-запросов с background-size

SVG-документы и медиа-запросы не ограничиваются изображениями переднего плана. Мы также можем изменить размер окна SVG, используя свойство CSS background-size. Все новые браузеры поддерживают этот метод, но более старые версии браузеров — нет. Будьте осторожны при использовании этой техники в производстве. Мы начнем с этого документа SVG:

Это простой случай. Элементы нашего круга получат новый цвет заливки при определенных ширинах окна просмотра. Когда область просмотра имеет ширину 20 пикселей, заливка будет оранжевой. Когда он будет шириной 300 пикселей — желтой.

Чтобы сделать это, мы должны использовать изображение SVG в качестве фонового изображения и установить для селектора свойство background-size. В этом случае мы будем использовать изображение в качестве фона для элемента body и для элементов li. На изображении ниже показаны результаты:

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree