Применение эффекта тени CSS3 для SVG элемента: проблемы и решения

Быстрый ответ

Если вам требуется быстро и эффективно добавить тень к элементу SVG при помощи CSS3, используйте следующий код:

svg {
  filter: drop-shadow(3px 3px 3px #00000066); /* Наглядный способ добавления тени */
}

В результате применения данного CSS-кода тень сместится на 3 пикселя по горизонтали и вертикали, получит размытие в 3 пикселя и полупрозрачность, соответствующую чёрному цвету.

Работа с прошлыми версиями для обеспечения совместимости

Чтобы обеспечить работу теней в старых версиях браузеров, таких как ранние версии Safari, добавьте префикс -webkit-filter:

svg {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7)); /* Основательно добавляем тень */
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7)); /* Обеспечиваем поддержку Safari */
}

Визуализация

Рассмотрим, как изменится SVG-иллюстрация после применения эффекта drop-shadow в CSS3:

До применения CSS3: SVG [🖼]  // Простая SVG иллюстрация
После применения CSS3: SVG [🖼👥] // SVG с эффектом падающей тени

Код, создающий этот эффект, будет выглядеть следующим образом:

svg {
  filter: drop-shadow(5px 5px 10px grey); /* Пробуждаем внутреннего художника */
}

Такое простое дополнение делает SVG более выразительным, добавляя ему 3D-эффект:

Плоское SVG [🎨] --> Объемное SVG [🎨💡👤] // Это Супермен? Нет, это 3D SVG!

Тени с использованием SVG фильтров

Если возможности CSS кажутся вам ограниченными, SVG предлагает массив фильтров:

<svg>
  <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
    <feOffset dx="2" dy="2" result="offsetblur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5"/>
    </feComponentTransfer>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <g filter="url(#dropshadow)">
    <!-- Здесь разместите контент SVG -->
  </g>
</svg>

Этот пример иллюстрирует создание тени с использованием SVG-фильтров feGaussianBlur, feOffset и feComponentTransfer, предоставляющих гибкую настройку теней.

Тени для текста в SVG

SVG-элемент <text> также может иметь тени, аналогичные обычному тексту, при использовании свойства text-shadow:

text {
  text-shadow: 2px 2px rgba(0,0,0,0.3); /* Теперь и для текста в SVG доступны тени */
}

Как видите, этот эффект повышает читаемость.

Настройка прозрачности при помощи RGBA

Меняя значение альфа-канала в цвете RGBA, можно добиться тонкой настройки теней:

svg {
  filter: drop-shadow(4px 4px 6px rgba(100, 100, 100, 0.5)); /* Тень полупрозрачна для более изящного вида SVG */
}

Подробнее об этом расскажет наш спикер на видео

Продвинутое использование SVG фильтров

Для создания идеальных теней в SVG, попробуйте использовать feDropShadow в ваших SVG-фильтрах:

<filter id="deepshadow" height="130%">
  <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#3d3d3d" flood-opacity="0.5"/>
</filter>

Такой фильтр, аналогичный CSS box-shadow, предоставляет возможность создания тонко настраиваемых и изящных SVG-теней.

Договор о совместимости теней

Для обеспечения видимости теней во всех браузерах необходимо обеспечить их совместимость. В случае обнаружения проблем, можно использовать полифиллы вроде CSS-Filters-Polyfill.

Полезные материалы

1. MDN Web Docs: <filter> – SVG
2. CSS-Tricks – SVG
3. Сара Суэйдан. Краткий курс фильтров SVG
4. Модуль эффектов фильтров уровня 1 – W3C
5. «Smashing Magazine»: Почему фильтры SVG великолепны
6. Stack Overflow: Новые вопросы по тегу 'svg+dropshadow'
7. Эксперименты с SVG фильтрами