SVGFESpotLightElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpotLightElement.y

Beschreibung

Die Eigenschaft y des Interfaces SVGFESpotLightElement gibt das y-Attribut eines <feSpotLight>-Elements zurück. Das Attribut legt die y-Koordinate der Lichtquelle fest. Zusammen mit x und z bestimmt es, wo der Spotlicht-Kegel sitzt, der in den Filtern <feDiffuseLighting> und <feSpecularLighting> für Lichteffekte verwendet wird.

Der Rückgabewert ist ein SVGAnimatedNumber-Objekt. Die Eigenschaft selbst ist schreibgeschützt, du kannst ihr also kein neues Objekt zuweisen. Den Wert änderst du über y.baseVal. y.animVal liefert den aktuellen, eventuell durch SMIL-Animation (<animate>) veränderten Wert und lässt sich nur lesen.

In welchem Koordinatensystem der Wert gilt, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab. Beim Standardwert userSpaceOnUse gilt das Benutzerkoordinatensystem. Bei objectBoundingBox ist der Wert ein Anteil der Bounding-Box des gefilterten Elements. Fehlt das Attribut, ist der Wert 0.

Typische Einsatzfälle sind interaktive Lichteffekte, zum Beispiel ein Spotlicht, das dem Mauszeiger folgt, oder das Auslesen und Anpassen der Lichtposition per Skript, ohne Attribut-Strings zu parsen.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, Basiswert des Attributs y) und animVal (nur lesbar, aktuell animierter Wert). Standardwert ist 0.

Beispiele

y-Koordinate der Lichtquelle auslesen

// SVG mit Spotlicht-Filter anlegen
document.body.insertAdjacentHTML('beforeend', `
  <svg width="200" height="200">
    <filter id="licht">
      <feSpecularLighting specularExponent="20" lighting-color="#fff">
        <feSpotLight id="spot" x="100" y="40" z="80" pointsAtX="100" pointsAtY="100" />
      </feSpecularLighting>
    </filter>
    <rect width="200" height="200" fill="steelblue" filter="url(#licht)" />
  </svg>`);

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

40 40

Spotlicht folgt der Maus

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

svg.addEventListener('pointermove', (event) => {
  const rect = svg.getBoundingClientRect();
  // Nur baseVal ist beschreibbar
  spot.x.baseVal = event.clientX - rect.left;
  spot.y.baseVal = event.clientY - rect.top;
});

Änderung über baseVal spiegelt sich im Attribut

const spot = document.getElementById('spot');
spot.y.baseVal = 150;
console.log(spot.getAttribute('y'));

// Direkte Zuweisung an y hat keine Wirkung (im Strict Mode: TypeError)
try {
  'use strict';
  spot.y = 10;
} catch (e) {
  console.log(e.name);
}
console.log(spot.y.baseVal);

150 150

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie spot.y = 10 wird ignoriert. In Modulen und im Strict Mode löst sie einen TypeError aus. Ändere den Wert stattdessen mit spot.y.baseVal = 10 oder setAttribute('y', '10').
Nicht verwechseln: SVGFESpotLightElement.y ist die Position der Lichtquelle. Das ist etwas anderes als y bei Filter-Primitiven wie SVGFEDiffuseLightingElement.y, das eine SVGAnimatedLength für den Primitiv-Teilbereich ist.
Koordinatensystem: Bei primitiveUnits=\"objectBoundingBox\" ist der Wert ein Anteil der Bounding-Box (z. B. 0.5), keine Pixelangabe.
Performance: Lichtfilter sind rechenintensiv. Häufige Updates, etwa bei pointermove, bündelst du am besten mit requestAnimationFrame.
Kompatibilität: Wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt. Das Element muss im SVG-Namensraum erzeugt werden, zum Beispiel mit document.createElementNS('http://www.w3.org/2000/svg', 'feSpotLight').

Siehe auch

SVGFESpotLightElement SVGFESpotLightElement.x SVGFESpotLightElement.z SVGFESpotLightElement.pointsAtY SVGAnimatedNumber SVGFEPointLightElement.y SVGTransformList.length