SVGFESpecularLightingElement.specularConstant — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.specularConstant

Beschreibung

Die schreibgeschützte Eigenschaft specularConstant der Schnittstelle SVGFESpecularLightingElement gibt ein SVGAnimatedNumber-Objekt zurück. Es steht für den Wert ks im Phong-Beleuchtungsmodell, den das Attribut specularConstant des Elements <feSpecularLighting> festlegt. Dieser Faktor bestimmt, wie stark die Glanzlichter (spiegelnde Reflexionen) im Filterergebnis ausfallen.

Schreibgeschützt ist nur die Referenz auf das Objekt selbst. Über specularConstant.baseVal lässt sich der Grundwert lesen und schreiben. specularConstant.animVal liefert dagegen den aktuell wirksamen Wert, der sich z. B. durch eine SMIL-Animation (<animate>) ändern kann. Fehlt das Attribut, beträgt der Standardwert 1.

Die Eigenschaft ist praktisch, wenn du Licht- und Glanzeffekte per Skript steuern willst: etwa einen Glanz, der beim Überfahren mit der Maus stärker wird, oder ein Schieberegler, mit dem man die Reflexionsstärke live einstellt. Nach der SVG-Spezifikation sind nur nicht-negative Werte sinnvoll. Übliche Werte liegen zwischen 0 und etwa 10.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Grundwert, beschreibbar, number) und animVal (aktuell animierter Wert, nur lesbar, number). Ohne gesetztes Attribut ist der Standardwert 1.

Beispiele

Wert auslesen

// <svg><filter id="glanz"><feSpecularLighting id="spec" specularConstant="1.5" specularExponent="20"><fePointLight x="50" y="50" z="100"/></feSpecularLighting></filter></svg>
const spec = document.getElementById('spec');
console.log(spec.specularConstant.baseVal);
console.log(spec.specularConstant.animVal);

1.5 1.5

Standardwert ohne Attribut

const ns = 'http://www.w3.org/2000/svg';
const el = document.createElementNS(ns, 'feSpecularLighting');
console.log(el.specularConstant.baseVal);

1

Glanzstärke per Schieberegler steuern

// <input type="range" id="ks" min="0" max="5" step="0.1" value="1">
const spec = document.querySelector('#glanz feSpecularLighting');
const slider = document.getElementById('ks');

slider.addEventListener('input', () => {
  // baseVal ist beschreibbar, auch wenn die Eigenschaft selbst readonly ist
  spec.specularConstant.baseVal = Number(slider.value);
  console.log('ks =', spec.getAttribute('specularConstant'));
});

ks = 2.3 (je nach Reglerstellung)

Glanz beim Hover verstärken

const spec = document.querySelector('#glanz feSpecularLighting');
const target = document.getElementById('button-shape');
const normal = spec.specularConstant.baseVal;

target.addEventListener('mouseenter', () => {
  spec.specularConstant.baseVal = normal * 2;
});
target.addEventListener('mouseleave', () => {
  spec.specularConstant.baseVal = normal;
});

// Wichtig · Fallstricke

Readonly bezieht sich nur auf die Objektreferenz: spec.specularConstant = 2 hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändere den Wert stattdessen über spec.specularConstant.baseVal = 2 oder setAttribute('specularConstant', '2').
animVal ist nur lesbar. Solange eine SMIL-Animation läuft, kann dieser Wert von baseVal abweichen.
Negative Werte sind laut Spezifikation nicht sinnvoll. Je nach Browser wird der Filter dann fehlerhaft oder gar nicht gezeichnet.
Leistung: Beleuchtungsfilter sind aufwendig zu berechnen. Wenn du den Wert oft änderst (z. B. bei jedem input-Ereignis auf großen Flächen), kann das Neuzeichnen spürbar ruckeln.
Der Attributname unterscheidet Groß- und Kleinschreibung (specularConstant). Bei in HTML eingebettetem SVG korrigiert der Parser die Schreibweise, bei setAttribute in XML-Dokumenten musst du selbst darauf achten.
Die Eigenschaft funktioniert in allen modernen Browsern (Chrome, Edge, Firefox, Safari).

Siehe auch

SVGFESpecularLightingElement SVGFESpecularLightingElement.specularExponent SVGFESpecularLightingElement.surfaceScale SVGFEDiffuseLightingElement.diffuseConstant SVGAnimatedNumber