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

Здесь буден приведен пример как можно не стандартно использовать фильтры для svg-изображений. Элемент используется для создания эффекта тени от векторного изображения. Идея состоит в том, чтобы слегка сдвинуть отрисованный элемента, по оси х и у на плоскости. Для начала, используя svg-графику создадим изображение, которое вы видите слева. Код для создания такого рисунка приведен ниже.
<svg height="100" width="100"> < defs>< filter id="f1" x="0" y="0" width="200%" height="200%"> < feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> < feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> < rect width="00" height="00" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /></svg> Применим фильтр feGaussianBlur, который выполнит размытие второй копии основного рисунка. В результате получится примитивная тень. Это еще не полноценное решение, так как тень получилась того же оттенка, что и основное изображение и сливается с основным изображением. Приведем код, который создает такой рисунок. Для того, чтобы было проще понять этот код, сравните его с кодом предыдущего рисунка.
<svg height="120" width="120" ><defs> < filter id="f2" x="0" y="0" width="200%" height="200%"> < feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> < feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> < feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> < rect width="70" height="70" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" /></svg> Теперь придадим тени естественности и сделаем ее темной. Для этого используем SourceAlpha. В результате тень получится уже максимально приближенной к реалистичной. Если разобраться в приведенном ниже коде, то можно изменить величину сдвига тени. Можно изменить величину размытия. Дальше приводится полный код для изображения с тенью, которое вы видите слева.
<svg height="120" width="120" > < defs> < filter id="f3" x="0" y="0" width="200%" height="200%"> < feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> < feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" /> < feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> < rect width="70" height="70" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" /></svg> Можно еще поэкспериментировать с тенью. Посмотрите на рисунок слева. Применен еще один фильтр: feColorMatrix, который сделал тень не такой резкой, как на предыдущем рисунке. Если обычно фильтры применяют для изменения исходного изображения, то здесь была продемонстрировано не стандартное решение - создание тени изображения. Ниже приводится код для последнего примера.
<svg height="120" width="120" > < defs> < filter id="f4" x="0" y="0" width="200%" height="200%"> < feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> < feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" /> < feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="5" /> < feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter></defs> < rect width="70" height="70" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" /></svg> Отметим, что применяя анимацию и скрипты, тень можно заставить перемещаться или плавно менять свой цвет. Очевидно, что фильтры для svg-графики позволяют создавать очень интересные эффекты.