SVGFESpotLightElement.pointsAtY — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpotLightElement.pointsAtY

Beschreibung

Die Eigenschaft pointsAtY gehört zur Schnittstelle SVGFESpotLightElement und gibt die y-Koordinate des Zielpunkts zurück, auf den der Spotlicht-Kegel eines <feSpotLight>-Elements ausgerichtet ist. Zusammen mit pointsAtX und pointsAtZ bestimmt sie die Richtung der Lichtquelle innerhalb von Beleuchtungsfiltern wie <feDiffuseLighting> oder <feSpecularLighting>.

Der Rückgabewert ist ein SVGAnimatedNumber-Objekt. Die Eigenschaft selbst ist schreibgeschützt, du kannst ihr also kein neues Objekt zuweisen. Über baseVal liest und setzt du den Grundwert des Attributs, über animVal liest du den aktuell gültigen, eventuell durch SMIL-Animation (<animate>) veränderten Wert.

Brauchbar ist das vor allem, wenn du Lichteffekte dynamisch steuern willst, zum Beispiel einen Spotlicht-Kegel, der dem Mauszeiger folgt, oder interaktive Reliefeffekte. Ist das Attribut nicht gesetzt, gilt der Standardwert 0.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Grundwert, beschreibbar, number) und animVal (animierter Wert, nur lesbar). Beide sind 0, wenn das Attribut fehlt.

Beispiele

Wert von pointsAtY auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="licht">
//     <feSpecularLighting specularExponent="20" lighting-color="#fff">
//       <feSpotLight id="spot" x="50" y="50" z="100"
//                    pointsAtX="100" pointsAtY="120" pointsAtZ="0"
//                    limitingConeAngle="30" />
//     </feSpecularLighting>
//   </filter>
//   <rect width="200" height="200" filter="url(#licht)" />
// </svg>

const spot = document.getElementById('spot');
console.log(spot.pointsAtY.baseVal);
console.log(spot.pointsAtY.animVal);

120 120

Spotlicht dem Mauszeiger folgen lassen

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

svg.addEventListener('pointermove', (event) => {
  const rect = svg.getBoundingClientRect();
  // Zielpunkt auf die Mausposition setzen
  spot.pointsAtX.baseVal = event.clientX - rect.left;
  spot.pointsAtY.baseVal = event.clientY - rect.top;
});

Standardwert bei fehlendem Attribut

const ns = 'http://www.w3.org/2000/svg';
const light = document.createElementNS(ns, 'feSpotLight');

console.log(light.pointsAtY.baseVal); // Attribut nicht gesetzt
light.setAttribute('pointsAtY', '42.5');
console.log(light.pointsAtY.baseVal);
console.log(light.getAttribute('pointsAtY'));

0 42.5 42.5

// Wichtig · Fallstricke

Schreibschutz: Mit spot.pointsAtY = 50 änderst du nichts, im Strict Mode gibt es dabei einen TypeError. Schreib stattdessen spot.pointsAtY.baseVal = 50 oder verwende setAttribute('pointsAtY', '50').
animVal ist nur lesbar: Wenn du animVal etwas zuweist, hat das keine Wirkung. Ohne laufende Animation stimmt animVal mit baseVal überein.
Koordinatensystem: Welche Einheiten der Wert hat, hängt von primitiveUnits des umgebenden <filter> ab. Bei objectBoundingBox sind es Bruchteile der Bounding-Box, also Werte zwischen 0 und 1, keine Pixel.
Groß-/Kleinschreibung: Das Attribut heißt in camelCase pointsAtY. In HTML-eingebettetem SVG korrigiert der Parser die Schreibweise automatisch, bei setAttribute in XML-Dokumenten musst du sie dagegen exakt einhalten.
Kompatibilität: Wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) seit Langem unterstützt.

Siehe auch

SVGFESpotLightElement SVGFESpotLightElement.pointsAtX SVGFESpotLightElement.pointsAtZ SVGFESpotLightElement.y SVGFESpotLightElement.limitingConeAngle SVGAnimatedNumber