Signatur
Beschreibung
Die Eigenschaft result des Interfaces SVGFEImageElement entspricht dem Attribut result eines <feImage>-Elements. Über diesen Namen lässt sich das Ergebnis des Filterprimitivs in nachfolgenden Primitiven desselben <filter> über deren in- bzw. in2-Attribut wieder aufgreifen, etwa um ein eingebundenes Bild mit <feBlend> oder <feComposite> mit der Grafik zu verrechnen.
Zurückgegeben wird kein einfacher String, sondern ein SVGAnimatedString-Objekt. Dessen Eigenschaft baseVal enthält den im Markup gesetzten Wert und ist beschreibbar. animVal liefert den aktuellen, möglicherweise durch SMIL-Animation veränderten Wert und ist schreibgeschützt. Schreibgeschützt ist also nur die Eigenschaft result selbst: Man kann ihr kein neues Objekt zuweisen, ihren baseVal aber sehr wohl ändern.
Die Eigenschaft kommt aus dem Mixin SVGFilterPrimitiveStandardAttributes und steht deshalb bei allen Filterprimitiven zur Verfügung (SVGFEBlendElement, SVGFEGaussianBlurElement usw.). Sie eignet sich gut, um Filterketten per Skript zu untersuchen oder dynamisch neu zu verknüpfen.
Rückgabewert
baseVal (beschreibbarer Grundwert des Attributs result) und animVal (aktueller animierter Wert, schreibgeschützt). Fehlt das Attribut, sind beide Werte ein leerer String "".Beispiele
Result-Namen eines feImage auslesen
// Voraussetzung im Markup:
// <svg><filter id="f"><feImage id="img" href="textur.png" result="textur"/></filter></svg>
const feImage = document.getElementById('img');
console.log(feImage.result instanceof SVGAnimatedString);
console.log(feImage.result.baseVal);
console.log(feImage.result.animVal);Filterkette dynamisch aufbauen und verknüpfen
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'overlay';
const feImage = document.createElementNS(SVG_NS, 'feImage');
feImage.setAttribute('href', 'muster.png');
// Namen über baseVal setzen – schreibt das Attribut result
feImage.result.baseVal = 'muster';
const feBlend = document.createElementNS(SVG_NS, 'feBlend');
feBlend.setAttribute('in', 'SourceGraphic');
// Ergebnis des feImage als zweiten Eingang verwenden
feBlend.setAttribute('in2', feImage.result.baseVal);
feBlend.setAttribute('mode', 'multiply');
filter.append(feImage, feBlend);
svg.append(filter);
document.body.append(svg);
console.log(feImage.getAttribute('result'));
console.log(feBlend.in2.baseVal);Alle benannten Ergebnisse eines Filters auflisten
const listResults = (filterId) => {
const filter = document.getElementById(filterId);
return [...filter.children]
.filter((el) => 'result' in el && el.result.baseVal !== '')
.map((el) => `${el.tagName}: ${el.result.baseVal}`);
};
console.log(listResults('f'));// Wichtig · Fallstricke
- Kein String:
feImage.resultist ein Objekt. Vergleiche wiefeImage.result === 'textur'ergeben immerfalse, verwende stattdessenresult.baseVal. - Zuweisung wirkungslos:
feImage.result = 'x'wird im Nicht-Strict-Modus stillschweigend ignoriert und führt im Strict-Modus zu einemTypeError. Schreibe stattdessen inresult.baseValoder nutzesetAttribute('result', …). - Gültigkeitsbereich: Ein
result-Name gilt nur innerhalb desselben<filter>. Kommt ein Name mehrfach vor, greift ein nachfolgendesinauf das zuletzt davor definierte Ergebnis zu. - Fehlender Name: Fehlt
resultistbaseValein leerer String. Das Ergebnis lässt sich dann nur implizit als Eingabe des direkt folgenden Primitivs nutzen. - Sicherheit: Bei
<feImage>mit externen Bildern gelten Einschränkungen für Ressourcen fremder Herkunft (CORS). Manche Browser, etwa Firefox, stellen externe Bilder infeImagenur eingeschränkt dar. - Kompatibilität: Wird von allen modernen Browsern unterstützt.