SVG -Unschärfe-Effekte
<defs> und <filter>
Alle Internet-SVG-Filter werden innerhalb eines <defs>-Elements definiert. Das Element <defs> ist die Abkürzung für Definitionen und enthält die Definition spezieller Elemente (zB Filter).
Das Element <filter> wird verwendet, um einen SVG-Filter zu definieren. Das Element <filter> hat ein erforderliches id-Attribut, das den Filter identifiziert. Die Grafik zeigt dann auf den zu verwendenden Filter.
SVG <feGaussianBlur>
Beispiel 1
Das Element <feGaussianBlur> wird verwendet, um Unschärfeeffekte 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>
Code-Erklärung:
- Das id-Attribut des <filter>-Elements definiert einen eindeutigen Namen für den Filter
- Der Blur-Effekt wird mit dem Element <feGaussianBlur> definiert
- Der Teil in="SourceGraphic" definiert, dass der Effekt für das gesamte Element erstellt wird
- Das stdDeviation-Attribut definiert die Stärke der Unschärfe
- Das filter-Attribut des <rect>-Elements verknüpft das Element mit dem „f1“-Filter