SVG Тіні
<defs> та <filter>
Усі фільтри SVG визначені в елементі <defs>. Елемент <defs> є скороченням від definition (визначення) і містить визначення спеціальних елементів (таких як фільтри).
Елемент <filter> використовується для визначення фільтра SVG. Елемент <filter> має обов’язковий атрибут id, який ідентифікує фільтр. Потім малюнок вказує на фільтр, який потрібно використовувати.
SVG <feOffset>
Приклад 1
Елемент <feOffset> використовується для створення ефектів тіні. Ідея полягає в тому, щоб взяти графіку SVG (зображення або елемент) і трохи перемістити її в площині xy.
Перший приклад зміщує прямокутник (за допомогою <feOffset>), а потім змішує оригінал поверх зміщеного зображення (за допомогою <feBlend>):
Ось код SVG:
Приклад
<svg height="120" width="120">
<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="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Спробуйте самі »
Пояснення коду:
- Атрибут id елемента
<filter>визначає унікальну назву для фільтра - Атрибут filter елемента
<rect>зв’язує елемент із фільтром "f1"
Приклад 2
Тепер офсетне зображення можна розмити (за допомогою <feGaussianBlur>):
Ось код SVG:
Приклад
<svg height="140" width="140">
<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="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>
Спробуйте самі »
Пояснення прикладу:
- Атрибут stdDeviation елемента
<feGaussianBlur>визначає ступінь розмиття
Приклад 3
Тепер зробіть тінь чорною:
Ось код SVG:
Приклад
<svg height="140" width="140">
<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="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>
Спробуйте самі »
Пояснення прикладу:
- Атрибут in елемента
<feOffset>змінено на "SourceAlpha", який використовує альфа-канал для розмиття замість усього пікселя RGBA
Приклад 4
Тепер розглядайте тінь як колір:
Ось код SVG:
Приклад
<svg height="140" width="140">
<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="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
</svg>
Спробуйте самі »
Пояснення прикладу:
- Фільтр
<feColorMatrix>використовується для наближення кольорів на офсетному зображенні до чорного. Усі три значення ’0.2’ у матриці множаться на червоний, зелений і синій канали. Зменшення їх значень наближає кольори до чорного (чорний дорівнює 0)
