SVGFESpecularLightingElement.specularExponent — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.specularExponent

Beschreibung

Die Eigenschaft specularExponent des Interfaces SVGFESpecularLightingElement gibt ein SVGAnimatedNumber-Objekt zurück, das das Attribut specularExponent des zugehörigen <feSpecularLighting>-Filterprimitivs widerspiegelt. Der Exponent steuert, wie „glänzend“ die Oberfläche wirkt: Größere Werte erzeugen kleinere, schärfere Glanzpunkte, kleinere Werte breite, weiche Reflexionen.

Die Eigenschaft selbst ist schreibgeschützt – das Objekt kann also nicht ersetzt werden. Über specularExponent.baseVal lässt sich der Attributwert jedoch lesen und setzen; specularExponent.animVal liefert den aktuell wirksamen Wert, etwa während einer SMIL-Animation.

Laut Spezifikation liegt der sinnvolle Wertebereich zwischen 1.0 und 128.0; fehlt das Attribut, gilt der Standardwert 1. Typische Einsatzfälle sind interaktive Licht- und Relief-Effekte, bei denen der Glanz per Skript an Schieberegler oder Mausposition gekoppelt wird.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (Attributwert, les- und schreibbar) und animVal (aktuell animierter Wert, nur lesbar). Standardwert ist 1.

Beispiele

Glanz-Exponent auslesen

// <filter id="shine"><feSpecularLighting id="spec" specularExponent="20" ...>
const spec = document.getElementById('spec');
console.log(spec.specularExponent.baseVal);
console.log(spec.specularExponent.animVal);

20 20

Glanz per Schieberegler steuern

const spec = document.querySelector('feSpecularLighting');
const slider = document.querySelector('#glanz'); // <input type="range" min="1" max="128">

slider.addEventListener('input', () => {
  // Wert auf den gültigen Bereich begrenzen
  const wert = Math.min(128, Math.max(1, Number(slider.value)));
  spec.specularExponent.baseVal = wert;
});

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 = 'licht';

const spec = document.createElementNS(NS, 'feSpecularLighting');
spec.setAttribute('surfaceScale', '5');
spec.setAttribute('specularConstant', '1');

const light = document.createElementNS(NS, 'fePointLight');
light.setAttribute('x', '50');
light.setAttribute('y', '50');
light.setAttribute('z', '100');
spec.append(light);
filter.append(spec);
svg.append(filter);

console.log(spec.specularExponent.baseVal); // Standardwert
spec.specularExponent.baseVal = 40;
console.log(spec.getAttribute('specularExponent'));

1 40

// Wichtig · Fallstricke

Die Eigenschaft selbst kann nicht neu zugewiesen werden (spec.specularExponent = 10 bleibt wirkungslos bzw. wirft im Strict Mode einen TypeError). Ändern Sie stattdessen baseVal oder nutzen Sie setAttribute().
Werte außerhalb von 1–128 werden von Browsern unterschiedlich behandelt (Klemmen oder Ignorieren des Filters) – daher vorher begrenzen.
animVal ist nur lesbar; Schreibversuche haben keine Wirkung.
Licht-Filter sind rechenintensiv; häufige Aktualisierungen (z. B. bei mousemove) ggf. mit requestAnimationFrame drosseln.
Wird in allen modernen Browsern unterstützt.

Siehe auch

SVGFESpecularLightingElement SVGFESpecularLightingElement.specularConstant SVGFESpecularLightingElement.surfaceScale SVGAnimatedNumber SVGFEDiffuseLightingElement