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 vom <filter>-Element definiert sind und auf sein Element angewendet werden sollen.

Hinweis: Als Präsentationsattribut hat filter auch ein entsprechendes CSS-Attribut: filter. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Technisch kann filter auf jedes Element angewendet werden, aber es hat nur Auswirkungen auf Container-Elemente ohne das <defs>-Element, alle Grafikelemente 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>

Verwendungshinweise

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

Eine Beschreibung der Werte finden Sie in der CSS filter-Eigenschaft.

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