SVGFESpotLightElement.pointsAtX — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpotLightElement.pointsAtX

Beschreibung

Die Eigenschaft pointsAtX des Interfaces SVGFESpotLightElement gibt die X-Koordinate des Punkts an, auf den der Spotlicht-Kegel eines <feSpotLight>-Elements ausgerichtet ist. Zusammen mit pointsAtY und pointsAtZ legt sie die Richtung des Lichtkegels fest. Die Lichtquelle selbst sitzt an der Position x/y/z.

Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen. Zurückgegeben wird ein SVGAnimatedNumber. Dessen Unterobjekt baseVal enthält den im Markup gesetzten Wert und ist beschreibbar. animVal enthält den aktuell wirksamen Wert, inklusive laufender SMIL-Animationen, und ist nur lesbar.

Typische Einsatzfälle sind dynamische Beleuchtungseffekte, zum Beispiel ein Spotlicht, das dem Mauszeiger folgt, oder das Auslesen der Filterkonfiguration zur Laufzeit. Der Standardwert ist 0, wenn das Attribut fehlt. Die Koordinate wird im Koordinatensystem interpretiert, das über das Attribut primitiveUnits des umgebenden <filter>-Elements festgelegt ist.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (beschreibbar, Wert aus dem Attribut pointsAtX, Standard 0) und animVal (nur lesbar, aktuell wirksamer Wert).

Beispiele

Wert des Attributs pointsAtX auslesen

// <svg><filter id="licht"><feSpecularLighting><feSpotLight id="spot" x="50" y="50" z="200" pointsAtX="120" pointsAtY="80" pointsAtZ="0"/></feSpecularLighting></filter></svg>
const spot = document.getElementById('spot');
console.log(spot.pointsAtX.baseVal);
console.log(spot.pointsAtX.animVal);

120 120

Spotlicht folgt dem Mauszeiger

const svg = document.querySelector('svg');
const spot = document.getElementById('spot');

svg.addEventListener('pointermove', (event) => {
  const rect = svg.getBoundingClientRect();
  // baseVal ist beschreibbar, pointsAtX selbst nicht
  spot.pointsAtX.baseVal = event.clientX - rect.left;
  spot.pointsAtY.baseVal = event.clientY - rect.top;
});

Element per Skript erzeugen und Wert prüfen

const NS = 'http://www.w3.org/2000/svg';
const spot = document.createElementNS(NS, 'feSpotLight');
console.log(spot.pointsAtX.baseVal); // Standardwert

spot.setAttribute('pointsAtX', '42.5');
console.log(spot.pointsAtX.baseVal);
console.log(spot.getAttribute('pointsAtX'));

0 42.5 42.5

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie spot.pointsAtX = 10 hat keine Wirkung und löst im Strict Mode einen TypeError aus. Setze stattdessen spot.pointsAtX.baseVal = 10 oder rufe setAttribute('pointsAtX', '10') auf.
Wenn du baseVal änderst, wird das Attribut im DOM automatisch aktualisiert und umgekehrt.
Die Groß- und Kleinschreibung des Attributnamens ist wichtig: In HTML-Dokumenten mit Inline-SVG übernimmt der Parser die korrekte Schreibweise. Bei setAttribute in XML-Dokumenten musst du exakt pointsAtX schreiben.
Die Wirkung hängt von primitiveUnits ab: Bei objectBoundingBox werden Werte als Anteile der Begrenzungsbox interpretiert, zum Beispiel 0.5. Viele Browser setzen das dort jedoch uneinheitlich um.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Häufiges Aktualisieren von Beleuchtungsfiltern ist rechenintensiv. Bündle Änderungen deshalb bei Bedarf mit requestAnimationFrame.

Siehe auch

SVGFESpotLightElement SVGFESpotLightElement.pointsAtY SVGFESpotLightElement.pointsAtZ SVGFESpotLightElement.x SVGFESpotLightElement.limitingConeAngle SVGAnimatedNumber