filter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das filter-Attribut gibt die Filtereffekte an, die durch das <filter>-Element definiert sind und auf das entsprechende Element angewendet werden sollen.

Hinweis: Als Präsentationsattribut hat filter auch ein entsprechendes CSS-Property: filter. Wenn beides angegeben ist, hat das CSS-Property Vorrang.

Technisch kann filter auf jedes Element angewendet werden, aber es hat nur Wirkung auf Container-Elemente ohne das <defs>-Element, alle Grafik-Elemente und das <use>-Element.

Beispiel

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>

  <rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>

Anmerkungen zur Verwendung

Wert none | <filter-value-list>
Standardwert none
Animierbar Ja

Für eine Beschreibung der Werte siehe die CSS-Eigenschaft filter.

Spezifikationen

Specification
Filter Effects Module Level 1
# FilterProperty

Browser-Kompatibilität

Siehe auch