SVG blødgøringseffekt

<defs> og <filter>

alle SVG-filtre findes i <defs> defineret i elementet.<defs> elementet er en forkortelse for definitioner, der indeholder definitioner af specialelementer (f.eks. filtre).

<filter> elementet bruges til at definere SVG-filtre.<filter> elementet har en nødvendig id-attribut, der bruges til at identificere filteret. Derefter henviser grafikken til det filter, der skal bruges.

SVG <feGaussianBlur>

Eksempel 1

<feGaussianBlur> Elementet bruges til at skabe en blødgøringseffekt:

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

Prøv det selv

Kodeforklaring:

• id-attributten på <filter>-elementet definerer filterets unikke navn
• <feGaussianBlur>-elementet definerer en blødgøringseffekt
• in="SourceGraphic" definerer effekten for hele elementet
• stdDeviation-attributten definerer blødgøringen
• <rect>-elementets filter-attribut knytter elementet til "f1"-filtret