SVGFEGaussianBlurElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEGaussianBlurElement.result

Beschreibung

Die Eigenschaft result gibt den Namen zurück, unter dem das Ergebnis des Filterprimitivs <feGaussianBlur> gespeichert wird. Sie entspricht dem SVG-Attribut result. Andere Filterprimitive in derselben <filter>-Kette können diesen Namen über ihre Attribute in oder in2 referenzieren, zum Beispiel um den weichgezeichneten Schatten mit der Originalgrafik zu kombinieren.

Der Rückgabewert ist ein SVGAnimatedString-Objekt. Über baseVal liest und setzt man den im Markup festgelegten Wert, über animVal den aktuellen (ggf. per SMIL animierten) Wert. Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen, result.baseVal lässt sich aber ändern.

Typische Anwendungsfälle sind das Auslesen oder dynamische Umbenennen von Zwischenergebnissen in Filterketten, etwa beim programmatischen Aufbau von Schlagschatten- oder Glow-Effekten.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (änderbarer Basiswert des result-Attributs) und animVal (schreibgeschützter aktueller Wert). Ist das Attribut nicht gesetzt, ist baseVal ein leerer String.

Beispiele

Namen des Blur-Ergebnisses auslesen

// HTML:
// <svg width="0" height="0">
//   <filter id="schatten">
//     <feGaussianBlur id="blur" in="SourceAlpha" stdDeviation="4" result="weich" />
//   </filter>
// </svg>
const blur = document.getElementById('blur');
console.log(blur.result.baseVal);
console.log(blur.result.animVal);

weich weich

Filterkette dynamisch aufbauen (Schlagschatten)

const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'dropShadow';

const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.setAttribute('in', 'SourceAlpha');
blur.setAttribute('stdDeviation', '3');
blur.result.baseVal = 'unscharf'; // setzt das result-Attribut

const offset = document.createElementNS(SVG_NS, 'feOffset');
offset.setAttribute('in', blur.result.baseVal);
offset.setAttribute('dx', '4');
offset.setAttribute('dy', '4');
offset.setAttribute('result', 'versetzt');

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(blur, offset, merge);
document.querySelector('svg defs').append(filter);
console.log(blur.getAttribute('result'));

unscharf

Zwischenergebnis umbenennen und Referenzen nachziehen

const renameResult = (blurEl, neuerName) => {
  const alterName = blurEl.result.baseVal;
  const filter = blurEl.closest('filter');
  filter.querySelectorAll(`[in="${alterName}"], [in2="${alterName}"]`).forEach((el) => {
    if (el.getAttribute('in') === alterName) el.setAttribute('in', neuerName);
    if (el.getAttribute('in2') === alterName) el.setAttribute('in2', neuerName);
  });
  blurEl.result.baseVal = neuerName;
};

const blur = document.querySelector('#schatten feGaussianBlur');
renameResult(blur, 'glow');
console.log(blur.result.baseVal);

glow

// Wichtig · Fallstricke

Die Eigenschaft ist schreibgeschützt: blur.result = 'x' hat keine Wirkung (im Strict Mode wirft es einen TypeError). Ändern Sie stattdessen blur.result.baseVal oder nutzen Sie setAttribute('result', …).
Wird ein result-Name umbenannt, zeigen in/in2-Verweise anderer Primitive nicht automatisch auf den neuen Namen. Nicht auflösbare Verweise werden je nach Browser wie SourceGraphic oder als vorheriges Ergebnis behandelt, was zu überraschenden Darstellungen führt.
Fehlt result, ist das Ergebnis nur implizit als Eingabe für das direkt folgende Primitiv verfügbar.
Vergeben Sie Namen innerhalb eines <filter> eindeutig; bei Duplikaten gilt das jeweils zuletzt davor definierte Ergebnis.
SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst existiert die Eigenschaft nicht.
Die Eigenschaft wird von allen modernen Browsern unterstützt; animVal spiegelt SMIL-Animationen wider.

Siehe auch

SVGFEGaussianBlurElement SVGFEGaussianBlurElement.in1 SVGFEGaussianBlurElement.stdDeviationX SVGFEGaussianBlurElement.setStdDeviation() SVGAnimatedString SVGFEOffsetElement.result SVGFEGaussianBlurElement.edgeMode