Добавить тень svg css

Возможности оформления SVG

Внешний вид SVG-элементам можно задавать как с помощью CSS, так и с помощью SVG-фильтров, градиентов и паттернов — их можно прописывать элементам прямо в коде либо задавать также через CSS.

Стили и скрипты можно задавать внутри SVG-файла, но если мы хотим, чтобы одно и то же изображение в разных условиях выглядело по-разному — стили внутри файла не годятся — нужно, чтобы векторное содержимое было доступно для внешних стилей.

Из всех способов вставки SVG для этого подходят всего два: иконочный шрифт или инлайновый SVG в HTML (удобнее всего делать это через use ).

Какие стили оформления можно использовать для иконочных шрифтов? Можно задать цвет, добавить тени и анимацию:

Не так уж и много, по сравнению с возможностями обычного SVG.

Для SVG-изображений можно использовать SVG-градиенты и фильтры, например, размытие или тени. Также можно использовать в качестве обводки и заливки паттерны и изображения, а ещё можно красить отдельные части картинок и таким образом получать разноцветные иконки.

При вставке SVG через use иконки становятся доступны для стилей страницы, и всеми этими прекрасными возможностями можно управлять через внешний CSS.

Вот пример иконок с паттернами в качестве фона:

Пример немного диковат, но он хорошо показывает, что фоном может быть любая картинка. Паттерны заданы в коде страницы и подключены с помощью CSS.

Вот код деревянного паттерна:

 pattern id="wood" width="400" height="400" patternUnits="userSpaceOnUse"> image xlink:href="//img-fotki.yandex.ru/get/6447/5091629.86/0_74298_17a84446_L.jpg" width="400" height="400"> pattern>

В паттерн можно класть всё что угодно: комбинации фигур, объекты с градиентами, текст. Правда, есть подозрение, что сложные фоны могут плохо влиять на производительность страницы, но тестов не делала.

Чтобы при наведении менять местами обводку и заливку, нужно добавить ещё пару строчек:

.icons--wood  fill: url(#wood); > .icons--wood .icon:hover  fill: none; stroke: url(#wood); >

Также можно делать интересные эффекты на основе обводки:

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

/* Обычная обводка, по наведению меняет цвет */ .icons--stroke .icon  stroke: rgba(0, 0, 0, .5); stroke-width: 2; &:hover  stroke: skyblue; > > /* Пунктирная обводка, по наведению линия становится непрерывной */ .icons--dasharray .icon  stroke: rgba(0, 0, 0, .5); stroke-width: 2; stroke-dasharray: 10 5; fill: rgba(0, 0, 0, .1); &:hover  stroke-dasharray: 10 0; > > /* Обводка с градиентом */ .icons--gradient .icon  stroke-width: 3; stroke: url(#stripes); >

Иконкам в последней строке в качестве обводки задан градиент, уходящий в прозрачность, почему-то не работает в последней опере.

С анимацией пуктирной обводки можно делать интересные штуки:

Нажмите Rerun если демо застыло.

Не уверена, что эта анимация подходит для иконок (будет не очень хорошо, если иконки будут шевелиться или исчезать), но она может быть использована для эффектно появляющихся иллюстраций.

path  fill: none; /* В качестве обводки задан градиент */ stroke: url(#stripes); stroke-width: 2; /* Исходное состояние обводки — длинные черточки с нулевыми пробелами */ stroke-dasharray: 550 0; animation: dasharray 5s infinite alternate; > @keyframes dasharray  100%  /* Черточки нулевой длины с длинными пробелами, линиия исчезнет */ stroke-dasharray: 0 500; > >

Следующий пример демонстрирует иконки с SVG-фильтрами:

Размытие, тень, повторяющийся контур и внутренняя тень (её не очень хорошо видно).

Конечно, размытие врядли подойдет для иконок, но с ним можно придумать разные другие интересные штуки.

У фильтров есть недостаток: результатом наложения фильтров является растровое изображение, из-за чего картинки утрачивают способность тянуться без потерь в качестве и хуже выглядят на экранах с ретиной.

UPD от 19 мая 2014: фильтры хорошо выглядят на ретине, при условии, что они задаются SVG-элементам, а не HTML. Прошу прощения за неточность.

В примере ниже SVG-изображение разделено на несколько путей, что дает возможность обращаться к ним поотдельности. Здесь это используется чтобы задать элементам разные цвета и задержки анимации. При этом в дальнейшем фигура (в данном случае это группа путей) может быть использована целиком — таким образом можно получить не только монохромные иконки, но и разноцветные. Правда, при вставке такого объекта через use в нем перестанет работать анимация, но раскраска сохранится.

В качестве заливки (или обводки) SVG-элементов удобно использовать сurrentColor . Это ключевое слово, обозначающее текущий цвет текста, и если задать его в качестве заливки (обводки) — элемент будет краситься вместе с окружающим текстом.

Если потом для родительского элемента задать цвет текста

фигура зальется этим же цветом. Очень удобно для ссылок по наведению и для страниц с несколькими темами оформления.

Интересно, что в SVG можно использовать далеко не все CSS-свойства, относительно полный список можно найти вот тут. Можно использовать animation , но transition работает странно и не во всех браузерах. CSS-градиенты использовать, к сожалению, нельзя. Трансформации работают.

Также перед использованием различных фильтров и эффектов нужно всегда проверять как они поддерживаются разными браузерами.

Из всего вышеизложенного можно сделать следующие выводы:

• самые широкие возможности для оформления дает инлайновый SVG;
• меньше возможностей, но более удобное подключение на страницу предоставляет иконочный шрифт. Существенный минус состоит в проблемах с поддержкой встраиваемых шрифтов в разных браузерах;
• если SVG-графика нужна только в одном стиле и нет необходимости управления через внешний CSS — лучше всего воспользоваться спрайтом.

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

Проекты

Источник

Как добавить эффект свечения (тень) для SVG при наведении

Простой пример, как добавить эффект свечения для svg-элемента с помощью добавления тени.

Итак, у нас есть такой svg-файл с градиентом:

Первым делом, кидаем файл в SVGOMG для того, чтобы оптимизировать и убрать все лишнее из кода svg. По итогу получим такой вычищенный код svg:

Необходимо, чтобы при наведении на него, он как бы подсвечивался, делать это буду с помощью тени. На выходе получился такой код, который я буду использовать в HTML:

svg defs stop < transition: .4s; >svg:hover defs stop < stop-color: #b6fff1; >svg defs feDropShadow < transition: .4s; flood-color: transparent; >svg:hover feDropShadow

Для плавного эффекта свечения задали фильтру прозрачный цвет, а при наведении нужный цвет #06deb5 — это цвет нашей тени:

svg defs feDropShadow < transition: .4s; flood-color: transparent; >svg:hover feDropShadow

Думаю, есть и другие способы для плавного появления тени, но именно этот сработал как нужно. Так же в стилях добавили правило для смены цвета нашего svg-элемента. Если просто указать fill=»b6fff1″ вместо fill=»url(#a)» , то плавного изменения цвета не будет, поэтому в стилях зададим для градиента stop-color: #b6fff1; — на самом деле, я без понятия, насколько это правильно, но это работает:

svg defs stop < transition: .4s; >svg:hover defs stop

• если подключать svg как файл, а не добавлением кода в HTML, то правила CSS не будут влиять на код svg.
• если на странице используется несколько одинаковых иконок со схожими фильтрами, тогда у каждой иконки должны быть уникальные ID фильтров и событий, иначе срабатывать эффекты будут на всех элементах при наведении на самый первый в коде элемент:

• или для аналогичных элементов с одинаковыми инструкциями внутри можно применять уже однажды объявленные инструкции. Элемент содержит идентифицируемые инструкции, которые могут быть использованы несколько раз по всему документу; он устанавливает определение, которое не будет отображаться, пока оно не будет вызвано. Еще раз. Можно один раз у первого элемента указать инструкции для градиента и теней внутри , а у остальных элементов просто вызвать нужные эффекты через идентификатор … fill=»url(#a)» filter=»url(#shadow)»/> .
• простой совет — сначала добавить нужные эффекты, а затем уже привязать их к событию hover

Источник

Setting Drop Shadows on SVGs

Not all drop shadows are equal. In this article (or video) learn how to set more special drop shadow using a CSS filter that allows our SVGs to partake in all the shadowy goodness.

Drop shadows have been a mainstay of UI designs for quite some time. Given this, it is no surprise that we have great built-in support for bringing drop shadows to life on the web. There are several approaches across HTML, CSS, and JS that we can use, and the approach we take depends largely on the element we are applying the shadow to. What we want to focus on in this article is how to apply a drop shadow to the increasingly ubiquitous SVG element.

SVGs are Special

For most of our DOM elements, we can set a shadow using the box-shadow property which uses the element frame as the shape to define the shadow by:

When dealing with text, we will want a more accurate shadow that represents the contours of each character as opposed to the rectangular-ish element frame. To pull this off, we have the more specialized text-shadow property.

When it comes to SVG elements, though, there is no handy svg-shadow equivalent in the CSS language. Instead, we have to knock on the doors of the CSS filter property and set its value to the drop-shadow function:

Once you have done this, your SVG will appear with a drop shadow custom-designed just for its unique characteristics:

The values that we can specify for the drop-shadow filter function are nearly identical to what we would specify for box-shadow and text-shadow . To learn more on how to specify a shadow using the drop-shadow filter function, the MDN documentation is really good on this. For a less good take on this, yours truly has written an article on CSS filters that you can refer to as well.

Conclusion

It’s easy to forget that SVG images are different than regular DOM elements or special-cased DOM elements like text. Our approach of using a drop-shadow filter is one of the easiest and most direct ways to apply a shadow to a SVG, independent of whether it is defined via an inline svg element or loaded as an external image file.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

• Arrays From Noob to Ninja
  • BUY
• JavaScript Absolute Beginner’s Guide
  • BUY
• Learning React:
  A Hands-on Guide
  • BUY
• Creating Web Animations
  • BUY

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 — delivered weekly to over a bazillion subscribers!

Serving you freshly baked content since 1998!
Killer hosting by GoDaddy

Источник