SVGFEDiffuseLightingElement.diffuseConstant — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDiffuseLightingElement.diffuseConstant

Beschreibung

Die schreibgeschützte Eigenschaft diffuseConstant der Schnittstelle SVGFEDiffuseLightingElement gibt ein SVGAnimatedNumber-Objekt zurück. Es entspricht dem Attribut diffuseConstant des Filterprimitivs <feDiffuseLighting>. Dieser Wert ist der Faktor kd im Phong-Beleuchtungsmodell und bestimmt, wie stark das diffus reflektierte Licht ausfällt.

Schreibgeschützt ist nur die Eigenschaft selbst, also die Referenz auf das SVGAnimatedNumber-Objekt. Über diffuseConstant.baseVal liest und setzt du den statischen Grundwert. diffuseConstant.animVal liefert den aktuellen, möglicherweise per SMIL animierten Wert und lässt sich nur lesen.

Die Eigenschaft eignet sich, um Lichteffekte dynamisch zu steuern, etwa für interaktive Relief- oder Prägeeffekte, Hover-Hervorhebungen oder das Anpassen der Helligkeit über einen Schieberegler. Ist das Attribut nicht gesetzt, gilt der Standardwert 1.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, number) und animVal (nur lesbar, number). Ohne gesetztes Attribut ist der Wert 1.

Beispiele

Aktuellen Wert auslesen

// &lt;svg&gt;&lt;filter id="licht"&gt;&lt;feDiffuseLighting id="diffus" diffuseConstant="1.5" lighting-color="white"&gt;&lt;fePointLight x="50" y="50" z="40"/&gt;&lt;/feDiffuseLighting&gt;&lt;/filter&gt;&lt;/svg&gt;
const diffus = document.getElementById('diffus');
console.log(diffus.diffuseConstant.baseVal);
console.log(diffus.diffuseConstant.animVal);

1.5 1.5

Helligkeit per Schieberegler steuern

const diffus = document.querySelector('feDiffuseLighting');
const regler = document.querySelector('#helligkeit'); // &lt;input type="range" min="0" max="5" step="0.1"&gt;

regler.addEventListener('input', () => {
  diffus.diffuseConstant.baseVal = Number(regler.value);
  // Das Attribut im DOM wird automatisch aktualisiert
  console.log(diffus.getAttribute('diffuseConstant'));
});

z. B. "2.3"

Filter komplett per Skript erzeugen

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

const licht = document.createElementNS(NS, 'feDiffuseLighting');
console.log(licht.diffuseConstant.baseVal); // Standardwert
licht.diffuseConstant.baseVal = 2;

const quelle = document.createElementNS(NS, 'feDistantLight');
quelle.setAttribute('azimuth', '45');
quelle.setAttribute('elevation', '60');

licht.append(quelle);
filter.append(licht);
svg.append(filter);
console.log(licht.getAttribute('diffuseConstant'));

1 "2"

// Wichtig · Fallstricke

Keine direkte Zuweisung: el.diffuseConstant = 2 hat keine Wirkung, im Strict Mode wirft es sogar einen TypeError. Setze den Wert immer über el.diffuseConstant.baseVal.
Wertebereich: Laut Spezifikation muss der Wert nicht negativ sein. Negative Werte gelten als Fehler, und die Browser deaktivieren dann meist den Filtereffekt oder verwenden den Standardwert.
animVal ist nur lesbar: Er spiegelt SMIL-Animationen wider, zum Beispiel über <animate attributeName=\"diffuseConstant\">. Änderungen über CSS-Animationen erscheinen dort nicht.
Groß- und Kleinschreibung: Der Attributname lautet in camelCase diffuseConstant. In XML- oder XHTML-Dokumenten muss die Schreibweise exakt stimmen.
Leistung: Beleuchtungsfilter sind rechenintensiv. Häufige Änderungen, etwa bei jedem mousemove, solltest du über requestAnimationFrame drosseln.
Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft.

Siehe auch

SVGFEDiffuseLightingElement SVGFEDiffuseLightingElement.surfaceScale SVGFEDiffuseLightingElement.kernelUnitLengthX SVGAnimatedNumber SVGFESpecularLightingElement