Signatur
Beschreibung
Die schreibgeschützte Eigenschaft result der Schnittstelle SVGFEMergeElement entspricht dem Attribut result eines <feMerge>-Elements. Der Wert ist ein SVGAnimatedString. Sein baseVal enthält den im Markup gesetzten Namen, sein animVal den aktuell wirksamen Wert, also den Wert einschließlich einer laufenden SMIL-Animation.
Innerhalb eines <filter> geben benannte Ergebnisse die Zwischenstände der Filterkette weiter. Ein <feMerge> legt mehrere Eingaben (<feMergeNode in="…">) übereinander. Über result bekommt dieses zusammengesetzte Bild einen Namen, den nachfolgende Primitive in ihrem in- oder in2-Attribut verwenden können.
Schreibgeschützt heißt hier nur, dass sich die Eigenschaft selbst nicht durch ein anderes Objekt ersetzen lässt. Den Namen kann man trotzdem ändern, und zwar über result.baseVal = "neuerName" oder setAttribute("result", …). Ist das Attribut nicht gesetzt, ist baseVal ein leerer String. Das Ergebnis ist dann nur für das direkt folgende Primitiv als implizite Eingabe verfügbar.
Rückgabewert
baseVal (Attributwert, beschreibbar) und animVal (aktuell wirksamer Wert, nur lesbar). Fehlt das Attribut, ist baseVal ein leerer String "".Beispiele
Ergebnisnamen eines feMerge auslesen
// Voraussetzung im HTML:
// <svg><filter id="schatten">
// <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
// <feMerge result="zusammen">
// <feMergeNode in="blur"/>
// <feMergeNode in="SourceGraphic"/>
// </feMerge>
// </filter></svg>
const merge = document.querySelector('#schatten feMerge');
console.log(merge.result instanceof SVGAnimatedString);
console.log(merge.result.baseVal);
console.log(merge.result.animVal);feMerge dynamisch erzeugen und benennen
const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'glow';
const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '4');
blur.result.baseVal = 'weich';
const merge = document.createElementNS(SVG_NS, 'feMerge');
merge.result.baseVal = 'leuchten'; // setzt das Attribut result
for (const quelle of ['weich', 'SourceGraphic']) {
const node = document.createElementNS(SVG_NS, 'feMergeNode');
node.in1.baseVal = quelle;
merge.append(node);
}
filter.append(blur, merge);
document.querySelector('svg defs').append(filter);
console.log(merge.getAttribute('result'));Nicht gesetztes result erkennen
const SVG_NS = 'http://www.w3.org/2000/svg';
const merge = document.createElementNS(SVG_NS, 'feMerge');
const name = merge.result.baseVal;
console.log(name === '' ? 'kein Name vergeben' : name);
// Versuch, die Eigenschaft selbst zu ersetzen, wird ignoriert (im Strict Mode: TypeError)
try {
'use strict';
merge.result = 'x';
} catch (e) {
console.log(e.name);
}
console.log(typeof merge.result);// Wichtig · Fallstricke
- Eigenschaft nicht direkt zuweisen:
merge.result = "x"ändert nichts. Im Strict Mode (z. B. in ES-Modulen) wirft die Zuweisung einenTypeError. Richtig istmerge.result.baseVal = "x". Hinweis zum dritten Beispiel: Eine'use strict'-Direktive innerhalb einestry-Blocks wirkt nicht. DerTypeErrortritt dort also nur auf, wenn der Code als Modul oder in einer Strict-Mode-Funktion läuft. - Namenskonflikte: Vergeben mehrere Primitive im selben Filter denselben
result-Namen, gilt für jede Referenz das zuletzt davor definierte Ergebnis. Eindeutige Namen verhindern schwer auffindbare Darstellungsfehler. - Reservierte Schlüsselwörter: Namen wie
SourceGraphicoderSourceAlphasollte man nicht alsresultverwenden. Sie überschatten sonst die eingebauten Eingaben. - Unbekannte Referenzen: Verweist ein
inauf einen Namen, den es nicht gibt, fällt der Browser auf das vorherige Ergebnis oder aufSourceGraphiczurück. Eine Fehlermeldung gibt es dabei nicht. - Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari).
animValunterscheidet sich nur bei SMIL-Animationen vonbaseVal.