SVGFEFloodElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEFloodElement extends SVGElement

Beschreibung

SVGFEFloodElement ist die DOM-Schnittstelle des SVG-Filterprimitivs <feFlood>. Dieses Primitiv erzeugt eine gleichmäßige Farbfläche. Farbe und Deckkraft steuern die Präsentationsattribute flood-color und flood-opacity, die sich auch als CSS-Eigenschaften setzen lassen. Die Fläche füllt das Teilgebiet des Primitivs aus, das über x, y, width und height festgelegt wird.

Allein bringt <feFlood> wenig. Nützlich wird es erst in Kombination mit anderen Primitiven, zum Beispiel:

farbige Schatten mit <feComposite> und <feOffset>,
Einfärben einer Grafik mit operator="in",
Hintergrundflächen hinter Texten mit <feMerge>.

Das Ergebnis erhält über das Attribut result einen Namen, den spätere Primitive dann per in oder in2 aufgreifen.

Eigene Eigenschaften hat die Schnittstelle nicht. Sie erbt von SVGElement und übernimmt aus SVGFilterPrimitiveStandardAttributes die Eigenschaften x, y, width, height (jeweils SVGAnimatedLength) und result (SVGAnimatedString). Einen Konstruktor gibt es nicht. Instanzen entstehen über document.createElementNS('http://www.w3.org/2000/svg', 'feFlood') oder durch das Parsen von SVG-Markup.

Parameter

Name	Typ	Default	Beschreibung
$x	SVGAnimatedLength	0%	Schreibgeschützt. Entspricht dem Attribut `x` und gibt die linke Kante des Teilgebiets des Primitivs an.
$y	SVGAnimatedLength	0%	Schreibgeschützt. Entspricht dem Attribut `y` und gibt die obere Kante des Teilgebiets an.
$width	SVGAnimatedLength	100%	Schreibgeschützt. Entspricht dem Attribut `width` und gibt die Breite des Teilgebiets an.
$height	SVGAnimatedLength	100%	Schreibgeschützt. Entspricht dem Attribut `height` und gibt die Höhe des Teilgebiets an.
$result	SVGAnimatedString		Schreibgeschützt. Entspricht dem Attribut `result`, also dem Namen des Ergebnisses, auf den andere Primitive verweisen können.

Rückgabewert

Typ

SVGFEFloodElement

Beschreibung

Eine Instanz entsteht über document.createElementNS() mit dem SVG-Namensraum oder durch geparstes SVG-Markup.

Beispiele

Farbigen Schatten per JavaScript aufbauen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'roter-schatten';

// Farbfläche erzeugen
const flood = document.createElementNS(SVG_NS, 'feFlood');
flood.setAttribute('flood-color', 'crimson');
flood.setAttribute('flood-opacity', '0.6');
flood.setAttribute('result', 'farbe');

// Fläche auf die Form der Grafik beschneiden
const comp = document.createElementNS(SVG_NS, 'feComposite');
comp.setAttribute('in', 'farbe');
comp.setAttribute('in2', 'SourceAlpha');
comp.setAttribute('operator', 'in');
comp.setAttribute('result', 'schatten');

// Schatten versetzen
const offset = document.createElementNS(SVG_NS, 'feOffset');
offset.setAttribute('in', 'schatten');
offset.setAttribute('dx', '4');
offset.setAttribute('dy', '4');
offset.setAttribute('result', 'versetzt');

// Schatten und Originalgrafik übereinanderlegen
const merge = document.createElementNS(SVG_NS, 'feMerge');
for (const quelle of ['versetzt', 'SourceGraphic']) {
  const node = document.createElementNS(SVG_NS, 'feMergeNode');
  node.setAttribute('in', quelle);
  merge.append(node);
}

filter.append(flood, comp, offset, merge);
let defs = svg.querySelector('defs');
if (!defs) {
  defs = document.createElementNS(SVG_NS, 'defs');
  svg.prepend(defs);
}
defs.append(filter);

svg.querySelector('circle').setAttribute('filter', 'url(#roter-schatten)');
console.log(flood instanceof SVGFEFloodElement);

true

Geerbte Geometrie-Eigenschaften auslesen

// <filter id="f"><feFlood x="10" y="20" width="50%" height="80" result="bg"/></filter>
const flood = document.querySelector('#f feFlood');

console.log(flood.x.baseVal.value);
console.log(flood.width.baseVal.valueAsString);
console.log(flood.result.baseVal);

// Über baseVal lässt sich das Attribut auch ändern
flood.result.baseVal = 'hintergrund';
console.log(flood.getAttribute('result'));

10 50% bg hintergrund

Flutfarbe dynamisch ändern (Theme-Umschaltung)

const flood = document.querySelector('#hervorhebung feFlood');

const setzeFarbe = (farbe, deckkraft = 1) => {
  // flood-color ist eine CSS-Eigenschaft, deshalb geht auch style
  flood.style.floodColor = farbe;
  flood.style.floodOpacity = String(deckkraft);
};

const dunkel = window.matchMedia('(prefers-color-scheme: dark)');
setzeFarbe(dunkel.matches ? '#ffd54f' : '#1565c0', 0.4);

dunkel.addEventListener('change', (e) => {
  setzeFarbe(e.matches ? '#ffd54f' : '#1565c0', 0.4);
});

console.log(getComputedStyle(flood).floodOpacity);

0.4

// Wichtig · Fallstricke

Keine Eigenschaften für Farbe und Deckkraft: flood-color und flood-opacity sind Präsentationsattribute bzw. CSS-Eigenschaften. Eine DOM-Eigenschaft wie flood.floodColor gibt es nicht. Setzen Sie die Werte über setAttribute() oder element.style.floodColor. Werte aus CSS haben Vorrang vor dem Attribut.
Namensraum: document.createElement('feFlood') erzeugt ein HTMLUnknownElement und kein SVG-Element. Nutzen Sie immer createElementNS() mit http://www.w3.org/2000/svg. Achten Sie außerdem auf die Groß-/Kleinschreibung feFlood.
Die Fläche deckt alles ab: Ohne <feComposite> oder <feMerge> überdeckt die Farbfläche die komplette Filterregion und damit die Originalgrafik.
Geometrie ist schreibgeschützt: x, y, width, height und result lassen sich nicht direkt neu zuweisen. Ändern Sie stattdessen baseVal oder das Attribut.
Leistung: Große Filterregionen oder häufige Farbwechsel während Animationen können das Neuzeichnen teuer machen, vor allem auf Mobilgeräten.
Kompatibilität: Alle modernen Browser unterstützen die Schnittstelle seit Langem.

Siehe auch

SVGFEBlendElement SVGFEFuncAElement SVGFEFuncBElement SVGFEFuncGElement SVGFEFuncRElement