<Defs> und <Filter>
Alle Internet - SVG - Filter werden in einem definierten <defs> Element. Das <defs> Element ist die Abkürzung für Definitionen und enthält Definition spezieller Elemente (such as filters) .
Die <filter> Element wird verwendet , um ein SVG - Filter zu definieren. Die <filter> Element hat eine erforderliche id - Attribut , die den Filter identifiziert. Die Grafik zeigt dann auf dem Filter zu verwenden.
SVG <feGaussianBlur>
Beispiel 1
Das <feGaussianBlur> Element wird verwendet , Blur - Effekte zu erzeugen:
Hier ist der SVG-Code:
Beispiel
<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>
Versuch es selber " Code explanation:
- Das id - Attribut des <filter> Element definiert einen eindeutigen Namen für den Filter
- Die Unschärfe wird mit dem definierten <feGaussianBlur> Element
- Die in="SourceGraphic" Teil definiert , dass die Wirkung für das gesamte Element erstellt wird
- Das stdDeviation Attribut definiert die Menge der Unschärfe
- Das filter - Attribut des <rect> Element verbindet das Element mit dem "f1" Filter