Efekty rozostření SVG
<defs> a <filtr>
Všechny internetové 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 <feGaussianBlur>
Příklad 1
Prvek <feGaussianBlur> se používá k vytváření efektů rozostření:
Zde je kód SVG:
Příklad
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"
/>
</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
- Efekt rozostření je definován prvkem <feGaussianBlur>
- Část in="SourceGraphic" definuje, že efekt je vytvořen pro celý prvek
- Atribut stdDeviation definuje míru rozostření
- Atribut filtru prvku <rect> spojuje prvek s filtrem "f1".