SVGFEOffsetElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEOffsetElement.result

Beschreibung

Die schreibgeschützte Eigenschaft result des Interfaces SVGFEOffsetElement spiegelt das SVG-Attribut result eines <feOffset>-Elements wider. Über diesen Namen können nachfolgende Filterprimitive innerhalb desselben <filter> das verschobene Zwischenbild als Eingabe (in bzw. in2) referenzieren – etwa um einen Schlagschatten mit <feMerge> oder <feBlend> zu kombinieren.

Der Rückgabewert ist ein SVGAnimatedString-Objekt. Die Eigenschaft selbst lässt sich nicht neu zuweisen, wohl aber dessen Eigenschaft baseVal: Das Schreiben von result.baseVal ändert das zugrunde liegende Attribut. animVal liefert den aktuellen (ggf. animierten) Wert und ist nur lesbar.

Typische Einsatzfälle sind das Auslesen oder dynamische Umbenennen von Filterzwischenergebnissen in Skripten, z. B. beim programmgesteuerten Aufbau oder Debuggen komplexer Filterketten. Ist kein result-Attribut gesetzt, ist baseVal ein leerer String – das Ergebnis steht dann nur implizit dem direkt folgenden Primitiv zur Verfügung.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (lesbar/schreibbar, Wert des result-Attributs) und animVal (nur lesbar, aktueller animierter Wert).

Beispiele

Namen des Offset-Ergebnisses auslesen

document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="120">
  <filter id="schatten">
    <feOffset id="versatz" in="SourceAlpha" dx="4" dy="4" result="verschoben" />
    <feGaussianBlur in="verschoben" stdDeviation="3" result="weich" />
    <feMerge>
      <feMergeNode in="weich" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
  <rect x="20" y="20" width="120" height="60" fill="teal" filter="url(#schatten)" />
</svg>`);

const offset = document.getElementById('versatz');
console.log(offset.result.baseVal);
console.log(offset.result.animVal);

verschoben verschoben

Ergebnis umbenennen und Referenzen nachziehen

const offset = document.querySelector('#schatten feOffset');
const blur = document.querySelector('#schatten feGaussianBlur');

// Neuen Namen vergeben – ändert das result-Attribut
offset.result.baseVal = 'offsetSchatten';
// Abhängiges Primitiv muss den neuen Namen referenzieren
blur.in1.baseVal = 'offsetSchatten';

console.log(offset.getAttribute('result'));
console.log(blur.in1.baseVal);

offsetSchatten offsetSchatten

feOffset per Skript erzeugen

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

const neuerOffset = document.createElementNS(SVG_NS, 'feOffset');
console.log(JSON.stringify(neuerOffset.result.baseVal)); // noch kein Name

neuerOffset.setAttribute('in', 'SourceGraphic');
neuerOffset.dx.baseVal = 10;
neuerOffset.result.baseVal = 'weitVerschoben';
filter.prepend(neuerOffset);

console.log(neuerOffset instanceof SVGFEOffsetElement, neuerOffset.result.baseVal);

"" true weitVerschoben

// Wichtig · Fallstricke

Schreibgeschützt ist nur die Referenz: offset.result = 'x' hat keine Wirkung (im strikten Modus ggf. TypeError). Zum Ändern immer offset.result.baseVal verwenden.
Nach dem Umbenennen müssen alle Primitive, die den alten Namen per in/in2 referenzieren, angepasst werden – sonst fällt der Browser auf das vorherige Ergebnis bzw. SourceGraphic zurück, ohne Fehlermeldung.
result-Namen gelten nur innerhalb desselben <filter>-Elements. Doppelte Namen sind erlaubt; referenziert wird dann das zuletzt davor definierte Ergebnis.
Elemente müssen mit createElementNS im SVG-Namensraum erzeugt werden, sonst existiert die Eigenschaft nicht.
Kompatibilität: in allen modernen Browsern unterstützt; die Eigenschaft stammt aus SVGFilterPrimitiveStandardAttributes und ist bei allen fe*-Elementen identisch.

Siehe auch

SVGFEOffsetElement SVGFEOffsetElement.in1 SVGFEOffsetElement.dx SVGFEOffsetElement.dy SVGAnimatedString SVGFEMergeNodeElement HTMLTextAreaElement.readOnly