SVGFEFloodElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEFloodElement.result

Beschreibung

Die Eigenschaft result des Interfaces SVGFEFloodElement spiegelt das SVG-Attribut result eines <feFlood>-Elements wider. Über diesen Namen können nachfolgende Filterprimitive innerhalb desselben <filter> das Ergebnis der Flächenfüllung über ihr in- oder in2-Attribut wieder aufgreifen, zum Beispiel um die Farbfläche mit <feComposite> oder <feBlend> mit der Grafik zu verrechnen.

Zurückgegeben wird ein SVGAnimatedString-Objekt. Der aktuell gesetzte Attributwert steht in baseVal, der Wert, der gerade tatsächlich gilt (und bei SMIL-Animation abweichen kann), in animVal. Die Eigenschaft selbst kannst du nicht neu zuweisen. Den Namen änderst du, indem du result.baseVal setzt oder setAttribute("result", …) aufrufst.

Ist kein result-Attribut gesetzt, ist baseVal ein leerer String. Das Ergebnis des Primitivs lässt sich dann nur implizit nutzen: als Eingabe des direkt folgenden Primitivs, wenn dieses kein in angibt.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (gesetzter Attributwert, les- und schreibbar) und animVal (aktuell geltender Wert, nur lesbar). Ohne Attribut ist der Wert ein leerer String "".

Beispiele

Namen des Filterergebnisses auslesen

// HTML:
// <svg width="200" height="100">
//   <filter id="hintergrund">
//     <feFlood id="flut" flood-color="gold" result="farbflaeche" />
//     <feComposite in="SourceGraphic" in2="farbflaeche" operator="over" />
//   </filter>
//   <text x="10" y="50" filter="url(#hintergrund)">Hallo</text>
// </svg>

const flood = document.getElementById("flut");
console.log(flood.result.baseVal);
console.log(flood.result.animVal);

farbflaeche farbflaeche

Filter per JavaScript aufbauen und Ergebnis umbenennen

const NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(NS, "svg");
const filter = document.createElementNS(NS, "filter");
filter.id = "markierung";

const flood = document.createElementNS(NS, "feFlood");
flood.setAttribute("flood-color", "#ff0");
flood.setAttribute("flood-opacity", "0.5");

// Namen über baseVal setzen – wird ins Attribut übernommen
flood.result.baseVal = "gelb";

const blend = document.createElementNS(NS, "feBlend");
blend.setAttribute("in", "SourceGraphic");
blend.setAttribute("in2", flood.result.baseVal);
blend.setAttribute("mode", "multiply");

filter.append(flood, blend);
svg.append(filter);
document.body.append(svg);

console.log(flood.getAttribute("result"));

gelb

Fehlendes result-Attribut erkennen

const floods = document.querySelectorAll("feFlood");

for (const el of floods) {
  const name = el.result.baseVal;
  console.log(name === "" ? "(kein Name – nur implizit nutzbar)" : name);
}

(kein Name – nur implizit nutzbar)

// Wichtig · Fallstricke

Schreibgeschützt: flood.result = "x" ändert nichts und wirft im Strict Mode einen TypeError. Verwende stattdessen flood.result.baseVal = "x".
Gültigkeitsbereich: result-Namen gelten nur innerhalb desselben <filter>. Wenn mehrere Primitive denselben Namen tragen, gilt für spätere Verweise das zuletzt davor definierte Primitiv.
Bei Tippfehlern im Verweis (in/in2) gibt es keine Fehlermeldung. Der Browser nimmt dann meist das vorherige Ergebnis oder SourceGraphic, und der Filter sieht unerwartet aus.
Die Eigenschaft ist nicht nur auf SVGFEFloodElement vorhanden: Alle Filterprimitive haben sie gemeinsam (Mixin SVGFilterPrimitiveStandardAttributes).
Kompatibilität: Wird in allen modernen Browsern seit Langem unterstützt. SMIL-Animationen und damit abweichende animVal-Werte sind selten.

Siehe auch

SVGFEFloodElement SVGAnimatedString SVGFEFloodElement.x SVGFEFloodElement.width SVGFECompositeElement SVGFilterElement SVGAElement.origin