SVGFETileElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETileElement.result

Beschreibung

Die Eigenschaft result des SVGFETileElement-Interfaces spiegelt das SVG-Attribut result eines <feTile>-Elements wider. Dieses Attribut gibt dem Ergebnis des Filterprimitivs einen Namen. Nachfolgende Primitive im selben <filter> können das Ergebnis dann über ihr in- oder in2-Attribut ansprechen.

Der Rückgabewert ist ein SVGAnimatedString-Objekt. Die Eigenschaft selbst ist zwar schreibgeschützt, das Objekt ist aber nicht fest: Über baseVal liest und setzt man den Attributwert, über animVal liest man den aktuell animierten Wert, etwa während einer SMIL-Animation.

<feTile> füllt den Filterbereich mit Kacheln aus seinem Eingabebild. In der Praxis wird es meist mit <feOffset> oder <feFlood> kombiniert. Dafür braucht man benannte Zwischenergebnisse, und genau diese steuert result. Per JavaScript lassen sich solche Filterketten zur Laufzeit untersuchen oder umbauen.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (lesbar und schreibbar, entspricht dem Attribut result) und animVal (nur lesbar, animierter Wert). Ist das Attribut nicht gesetzt, ist baseVal ein leerer String.

Beispiele

Namen eines feTile-Ergebnisses auslesen

// HTML: <svg><filter id="kachel"><feFlood flood-color="teal" result="flaeche"/><feOffset in="flaeche" dx="5" dy="5" width="10" height="10" result="stueck"/><feTile id="tile" in="stueck" result="muster"/></filter></svg>
const tile = document.getElementById('tile');
console.log(tile.result instanceof SVGAnimatedString);
console.log(tile.result.baseVal);
console.log(tile.result.animVal);

true muster muster

Ergebnis umbenennen und Folgeprimitiv anpassen

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

const tile = document.createElementNS(svgNS, 'feTile');
tile.setAttribute('in', 'SourceGraphic');
tile.result.baseVal = 'kacheln'; // setzt das Attribut result

const blend = document.createElementNS(svgNS, 'feBlend');
blend.setAttribute('in', 'SourceGraphic');
blend.setAttribute('in2', tile.result.baseVal);

filter.append(tile, blend);
console.log(tile.getAttribute('result'));
console.log(blend.getAttribute('in2'));

kacheln kacheln

Alle Verweise auf ein feTile-Ergebnis finden

const findUsages = (tileEl) => {
  const name = tileEl.result.baseVal;
  if (!name) return [];
  const filter = tileEl.closest('filter');
  return [...filter.children].filter((el) =>
    el.getAttribute('in') === name || el.getAttribute('in2') === name
  );
};

const tile = document.querySelector('feTile');
console.log(findUsages(tile).map((el) => el.tagName));

["feBlend"] (abhängig vom Markup)

// Wichtig · Fallstricke

Keine direkte Zuweisung: tile.result = 'x' hat keine Wirkung, im Strict Mode wirft es einen TypeError. Man setzt den Wert immer über tile.result.baseVal oder setAttribute('result', …).
Gültigkeitsbereich: Ein Name gilt nur innerhalb desselben <filter>. Vergeben mehrere Primitive denselben Namen, verweisen spätere in-Angaben auf das zuletzt davor definierte Ergebnis.
Keine Fehlermeldung bei falschen Verweisen: Zeigt in auf einen nicht vorhandenen Namen, verwendet der Browser stillschweigend das Ergebnis des vorherigen Primitivs (bzw. SourceGraphic). Tippfehler fallen deshalb leicht nicht auf.
animVal ist nur lesbar. Die meisten Browser unterstützen nur noch eingeschränkt die Animation von result, dann ist animVal meist gleich baseVal.
Diese Eigenschaft wird in allen modernen Browsern unterstützt. Sie stammt aus dem gemeinsamen Mixin SVGFilterPrimitiveStandardAttributes.

Siehe auch

SVGFETileElement SVGFETileElement.in1 SVGAnimatedString SVGFilterElement SVGFEOffsetElement CSSFunctionDescriptors.result HTMLTableElement.rules