SVGFEPointLightElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEPointLightElement.y

Beschreibung

Die Eigenschaft y des Interfaces SVGFEPointLightElement entspricht dem Attribut y des SVG-Elements <fePointLight>. Sie gibt die vertikale Koordinate der Punktlichtquelle an. Diese Lichtquelle wird in den Beleuchtungsfiltern <feDiffuseLighting> und <feSpecularLighting> verwendet.

Der Rückgabewert ist ein SVGAnimatedNumber-Objekt. Über baseVal liest oder setzt du den im Attribut hinterlegten Grundwert. animVal liefert den aktuellen, gegebenenfalls durch SMIL-Animationen (<animate>) veränderten Wert und lässt sich nur lesen. Die Eigenschaft y selbst kannst du nicht neu zuweisen, ihr baseVal aber schon.

Das Koordinatensystem hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab. Beim Standardwert userSpaceOnUse ist y ein Wert im Benutzerkoordinatensystem, also meist in Pixeln. Bei objectBoundingBox ist es ein Bruchteil der Höhe des gefilterten Elements. Fehlt das Attribut, ist der Wert 0.

Typische Anwendungen sind interaktive Lichteffekte, zum Beispiel eine Lichtquelle, die dem Mauszeiger folgt, oder das dynamische Auslesen und Ändern der Lichtposition per Skript.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (number, les- und schreibbar) und animVal (number, nur lesbar) für die y-Koordinate der Lichtquelle. Standardwert ist 0.

Beispiele

y-Koordinate einer Punktlichtquelle auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="licht">
//     <feDiffuseLighting in="SourceGraphic" lighting-color="white">
//       <fePointLight id="punkt" x="50" y="80" z="40" />
//     </feDiffuseLighting>
//   </filter>
//   <rect width="200" height="200" fill="steelblue" filter="url(#licht)" />
// </svg>

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

80 80

Lichtquelle folgt dem Mauszeiger

const svg = document.querySelector('svg');
const light = document.getElementById('punkt');

const onMove = (event) => {
  const rect = svg.getBoundingClientRect();
  // baseVal ist beschreibbar – y selbst nicht
  light.x.baseVal = event.clientX - rect.left;
  light.y.baseVal = event.clientY - rect.top;
};

svg.addEventListener('pointermove', onMove);

Lichtposition vertikal animieren

const light = document.getElementById('punkt');
let start = null;

const tick = (time) => {
  start ??= time;
  const t = (time - start) / 1000;
  // Licht pendelt zwischen y = 20 und y = 180
  light.y.baseVal = 100 + Math.sin(t * 2) * 80;
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

// Wichtig · Fallstricke

Schreibschutz: Eine Zuweisung wie light.y = 50 hat keine Wirkung und wirft im Strict Mode einen TypeError. Nutze stattdessen light.y.baseVal = 50 oder light.setAttribute('y', '50').
Nur Zahlen: Anders als bei SVGAnimatedLength gibt es hier keine Einheiten. Werte wie "10px" oder "50%" im Attribut sind ungültig.
primitiveUnits beachten: Bei primitiveUnits="objectBoundingBox" musst du Bruchwerte wie 0.5 statt Pixelwerten angeben, sonst liegt das Licht weit außerhalb des Elements.
animVal ist nur lesbar: Er spiegelt SMIL-Animationen wider. CSS-Animationen verändern das Attribut y nicht.
Leistung: Beleuchtungsfilter sind aufwendig zu berechnen. Häufige Änderungen, etwa bei pointermove, können auf großen Flächen oder Mobilgeräten ruckeln.
Kompatibilität: Wird von allen modernen Browsern (Chrome, Edge, Firefox, Safari) seit Langem unterstützt.

Siehe auch

SVGFEPointLightElement SVGFEPointLightElement.x SVGFEPointLightElement.z SVGAnimatedNumber SVGFESpotLightElement SVGFEDiffuseLightingElement SVGAElement.interestForElement