SVGFESpotLightElement.specularExponent — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpotLightElement.specularExponent

Beschreibung

Die Eigenschaft specularExponent der Schnittstelle SVGFESpotLightElement spiegelt das gleichnamige Attribut des <feSpotLight>-Elements wider. Sie gibt ein SVGAnimatedNumber-Objekt zurück, nicht direkt eine Zahl.

Das Attribut specularExponent legt fest, wie stark der Lichtkegel des Spotlights zum Rand hin abfällt. Ein kleiner Wert (Standard 1) ergibt einen weichen, breit gestreuten Kegel. Ein großer Wert bündelt das Licht stärker um die Achse, die durch pointsAtX, pointsAtY und pointsAtZ festgelegt ist. Nicht verwechseln solltest du das mit dem gleichnamigen Attribut von <feSpecularLighting>: Dort bestimmt es den Glanz der Oberfläche.

Über baseVal liest und setzt du den im Markup festgelegten Wert. animVal liefert den aktuellen Wert, auch während einer SMIL-Animation mit <animate>. Die Eigenschaft selbst ist schreibgeschützt, das Objekt dahinter kannst du aber über baseVal ändern.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Basiswert, beschreibbar) und animVal (aktueller, eventuell animierter Wert, nur lesbar). Fehlt das Attribut, ist der Wert 1.

Beispiele

Wert auslesen

// <svg><filter id="licht"><feSpecularLighting><feSpotLight id="spot" x="50" y="50" z="100" specularExponent="8"/></feSpecularLighting></filter></svg>
const spot = document.getElementById('spot');
console.log(spot.specularExponent.baseVal);
console.log(spot.specularExponent.animVal);

8 8

Lichtkegel per Schieberegler bündeln

const spot = document.querySelector('feSpotLight');
const regler = document.querySelector('#fokus'); // <input type="range" min="1" max="64">

regler.addEventListener('input', () => {
  // baseVal ist beschreibbar und aktualisiert das Attribut
  spot.specularExponent.baseVal = Number(regler.value);
  console.log(spot.getAttribute('specularExponent'));
});

z. B. "32"

Standardwert ohne Attribut

const ns = 'http://www.w3.org/2000/svg';
const spot = document.createElementNS(ns, 'feSpotLight');
console.log(spot.specularExponent instanceof SVGAnimatedNumber);
console.log(spot.specularExponent.baseVal);

true 1

// Wichtig · Fallstricke

Wenn du spot.specularExponent = 5 zuweist, passiert nichts, weil die Eigenschaft schreibgeschützt ist. Im Strict Mode wirft die Zuweisung einen TypeError. Ändere stattdessen specularExponent.baseVal oder nutze setAttribute('specularExponent', '5').
Die Groß- und Kleinschreibung des Attributnamens ist wichtig: Es heißt specularExponent mit großem E. Das musst du bei createElementNS und setAttribute beachten.
Nicht verwechseln mit SVGFESpecularLightingElement.specularExponent. Dort ist der Wertebereich 1–128 und das Attribut beschreibt den Glanz der Oberfläche statt der Bündelung des Kegels.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Wie gleichmäßig der Lichtkegel abfällt, kann sich zwischen den Render-Engines leicht unterscheiden.
Viele Filter mit Lichteffekten auf großen Flächen kosten Leistung, besonders wenn du sie bei jedem input-Ereignis neu berechnen lässt.

Siehe auch

SVGFESpotLightElement SVGFESpotLightElement.limitingConeAngle SVGFESpotLightElement.pointsAtX SVGAnimatedNumber SVGFESpecularLightingElement