SVG Verwischungseffekt

<defs> und <filter>

Alle SVG-Filter sind in <defs> definiert im Element.<defs> Das Element ist eine Abkürzung für Definitionen (definitions) und enthält Definitionen für spezielle Elemente (z.B. Filter).

<filter> Das Element wird verwendet, um SVG-Filter zu definieren.<filter> Das Element hat eine erforderliche id-Eigenschaft, um den Filter zu kennzeichnen. Danach verweist die Grafik auf den zu verwendenden Filter.

SVG <feGaussianBlur>

Beispiel 1

<feGaussianBlur> Das Element wird verwendet, um den Verwischungseffekt zu erstellen:

Dies ist der SVG-Code:

<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>

Probieren Sie es selbst aus

Code-Explainierung:

• Die id-Eigenschaft des Elements <filter> definiert den eindeutigen Namen des Filters.
• Das Element <feGaussianBlur> definiert den Verwischungseffekt.
• Die Definition "in="SourceGraphic"" erstellt den gesamten Effekt des Elements.
• Die Eigenschaft stdDeviation definiert die Blurrungsmenge
• Die Filter-Eigenschaft des <rect>-Elements verknüpft das Element mit dem "f1"-Filter