SVG Vagueffecten

<defs> en <filter>

Alle SVG-filters zijn in <defs> worden gedefinieerd in het element.<defs> Het element is een afkorting van definitions en bevat definities van speciale elementen (zoals filters).

<filter> Het element wordt gebruikt om SVG-filters te definiëren.<filter> Het element heeft een vereiste id-eigenschap die het filter identificeert. Vervolgens wijst de grafiek naar het te gebruiken filter.

SVG <feGaussianBlur>

Voorbeeld 1

<feGaussianBlur> Elementen worden gebruikt om vaagheideffecten te creëren:

Dit is de 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>

Probeer het zelf

Codeverklaring:

• De id-eigenschap van het element <filter> definieert de unieke naam van het filter
• Het element <feGaussianBlur> definieert de vaagheideffecten
• Het "in="SourceGraphic"" definieert de effecten die voor het hele element worden gecreëerd
• De stdDeviation-eigenschap definieert de mate van vervaging
• De filter-eigenschap van het <rect> element koppelt het element aan de "f1" filter