Efekty rozmycia SVG
<defs> i <filtr>
Wszystkie internetowe filtry SVG są zdefiniowane w elemencie <defs>. Element <defs> jest skrótem od definicji i zawiera definicję elementów specjalnych (takich jak filtry).
Element <filter> służy do definiowania filtra SVG. Element <filter> ma wymagany atrybut id, który identyfikuje filtr. Grafika wskazuje następnie filtr, którego należy użyć.
SVG <feGaussianBlur>
Przykład 1
Element <feGaussianBlur> służy do tworzenia efektów rozmycia:
Oto kod SVG:
Przykład
<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>
Wyjaśnienie kodu:
- Atrybut id elementu <filter> definiuje unikalną nazwę filtra
- Efekt rozmycia jest zdefiniowany za pomocą elementu <feGaussianBlur>
- Część in="SourceGraphic" określa, że efekt jest tworzony dla całego elementu
- Atrybut stdDeviation określa stopień rozmycia
- Atrybut filtra elementu <rect> łączy element z filtrem „f1”