SVG suddighetseffekt

<defs> och <filter>

Alla SVG-filter finns i <defs> definieras i elementet.<defs> Elementet är en förkortning för definition (definitions), som innehåller definitioner av specialelement (t.ex. filter).

<filter> Elementet används för att definiera SVG-filter.<filter> Elementet har en nödvändig id-egenskap för att identifiera filter. Därefter pekar grafiken på det filter som ska användas.

SVG <feGaussianBlur>

Exempel 1

<feGaussianBlur> Elementet används för att skapa suddig effekt:

Detta är SVG-koden:

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

Prova själv

Kodförklaring:

• id-egenskapen för <filter>-elementet definierar unikt namn för filter
• <feGaussianBlur>-elementet definierar suddig effekt
• in="SourceGraphic" definierar effekten för hela elementet
• stdDeviation-attributet definierar mängden osäkerhet
• Filter-attributet för <rect>-elementet länkar elementet till "f1"-filter