Vržené stíny SVG
<defs> a <filtr>
Všechny filtry SVG jsou definovány v prvku <defs>. Element <defs> je zkratka pro definice a obsahuje definici speciálních prvků (jako jsou filtry).
Prvek <filter> se používá k definování filtru SVG. Prvek <filter> má povinný atribut id, který identifikuje filtr. Grafika pak ukazuje na filtr, který chcete použít.
SVG <feOffset>
Příklad 1
Prvek <feOffset> se používá k vytvoření efektů vrženého stínu. Cílem je vzít grafiku SVG (obrázek nebo prvek) a posunout ji o kousek v rovině xy.
První příklad odsadí obdélník (pomocí <feOffset>), poté prolne originál v horní části odsazeného obrazu (pomocí <feBlend>):
Zde je kód SVG:
Příklad
<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>
Vysvětlení kódu:
- Atribut id prvku <filter> definuje jedinečný název filtru
- Atribut filtru prvku <rect> spojuje prvek s filtrem "f1".
Příklad 2
Nyní lze offsetový obrázek rozmazat (pomocí <feGaussianBlur>):
Zde je kód SVG:
Příklad
<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>
Vysvětlení kódu:
- Atribut stdDeviation prvku <feGaussianBlur> definuje míru rozmazání
Příklad 3
Nyní udělejte stín černým:
Zde je kód SVG:
Příklad
<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>
Vysvětlení kódu:
- Atribut in prvku <feOffset> se změní na "SourceAlpha", který pro rozmazání používá kanál Alpha namísto celého pixelu RGBA.
Příklad 4
Nyní zacházejte se stínem jako s barvou:
Zde je kód SVG:
Příklad
<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>
Vysvětlení kódu:
- Filtr <feColorMatrix> se používá k transformaci barev v ofsetovém obrázku blíže k černé. Všechny tři hodnoty '0,2' v matici se vynásobí červeným, zeleným a modrým kanálem. Snížením jejich hodnot se barvy přiblíží černé (černá je 0)