filter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2020⁩.

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,
body,
svg {
  height: 100%;
}

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

<filter>
CSS filter-Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden