Кодинг
★ Рубрика: Кодинг
★ Тема: графика, SVG

SVG-фильтр для создания тени

Здесь буден приведен пример как можно не стандартно использовать фильтры для svg-изображений. Элемент используется для создания эффекта тени от векторного изображения. Идея состоит в том, чтобы слегка сдвинуть отрисованный элемента, по оси х и у на плоскости. Для начала, используя svg-графику создадим изображение, которое вы видите слева. Код для создания такого рисунка приведен ниже.
Применим фильтр feGaussianBlur, который выполнит размытие второй копии основного рисунка. В результате получится примитивная тень. Это еще не полноценное решение, так как тень получилась того же оттенка, что и основное изображение и сливается с основным изображением. Приведем код, который создает такой рисунок. Для того, чтобы было проще понять этот код, сравните его с кодом предыдущего рисунка.
Теперь придадим тени естественности и сделаем ее темной. Для этого используем SourceAlpha. В результате тень получится уже максимально приближенной к реалистичной. Если разобраться в приведенном ниже коде, то можно изменить величину сдвига тени. Можно изменить величину размытия. Дальше приводится полный код для изображения с тенью, которое вы видите слева.
Можно еще поэкспериментировать с тенью. Посмотрите на рисунок слева. Применен еще один фильтр: feColorMatrix, который сделал тень не такой резкой, как на предыдущем рисунке. Если обычно фильтры применяют для изменения исходного изображения, то здесь была продемонстрировано не стандартное решение - создание тени изображения. Ниже приводится код для последнего примера.
Отметим, что применяя анимацию и скрипты, тень можно заставить перемещаться или плавно менять свой цвет. Очевидно, что фильтры для svg-графики позволяют создавать очень интересные эффекты.

 Похожие публикации: графика, SVG

Войти и комментировать [ Вход | Регистрация ]