SVGFEPointLightElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEPointLightElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGFEPointLightElement entspricht dem Attribut x des SVG-Elements <fePointLight>. Sie beschreibt die horizontale Position der Punktlichtquelle, die in Beleuchtungsfiltern wie <feDiffuseLighting> oder <feSpecularLighting> verwendet wird.

Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedNumber-Objekt. Über baseVal liest oder setzt man den im Attribut hinterlegten Grundwert, über animVal liest man den aktuellen, ggf. durch SMIL-Animationen (<animate>) veränderten Wert.

Die Koordinate wird im Koordinatensystem interpretiert, das durch das Attribut primitiveUnits des umgebenden <filter>-Elements festgelegt ist. Standard ist userSpaceOnUse, also Benutzereinheiten der Zeichenfläche. Fehlt das Attribut, beträgt der Wert 0.

Typische Anwendungsfälle sind interaktive Lichteffekte, etwa eine Lichtquelle, die dem Mauszeiger folgt, oder das programmatische Auslesen und Anpassen von Filterparametern.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (beschreibbarer Grundwert, number) und animVal (nur lesbarer, aktuell animierter Wert, number).

Beispiele

x-Koordinate auslesen

// <svg><filter id="licht"><feDiffuseLighting><fePointLight id="punkt" x="50" y="60" z="30"/></feDiffuseLighting></filter></svg>
const light = document.getElementById('punkt');
console.log(light.x.baseVal);
console.log(light.x.animVal);

50 50

Lichtquelle folgt dem Mauszeiger

const svg = document.querySelector('svg');
const light = document.querySelector('fePointLight');

svg.addEventListener('pointermove', (event) => {
  // Bildschirmkoordinaten in SVG-Benutzerkoordinaten umrechnen
  const pt = new DOMPoint(event.clientX, event.clientY)
    .matrixTransform(svg.getScreenCTM().inverse());
  light.x.baseVal = pt.x;
  light.y.baseVal = pt.y;
});

Punktlicht dynamisch erzeugen

const NS = 'http://www.w3.org/2000/svg';
const lighting = document.querySelector('feSpecularLighting');
const light = document.createElementNS(NS, 'fePointLight');

light.x.baseVal = 120; // setzt das Attribut x="120"
light.y.baseVal = 80;
light.z.baseVal = 50;
lighting.append(light);

console.log(light.getAttribute('x'));

120

// Wichtig · Fallstricke

Die Eigenschaft selbst ist nur lesbar: light.x = 10 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändern Sie stattdessen light.x.baseVal oder nutzen Sie setAttribute('x', ...).
animVal ist nur lesbar und gibt während einer SMIL-Animation den animierten Wert zurück, baseVal bleibt davon unberührt.
Wenn primitiveUnits=\"objectBoundingBox\" gesetzt ist, wird x als Anteil der Begrenzungsbox interpretiert (z. B. 0.5 für die Mitte), nicht in Pixeln.
Elemente müssen mit createElementNS im SVG-Namensraum erzeugt werden, sonst gibt es die Eigenschaft nicht.
Wird in allen modernen Browsern unterstützt. Häufiges Aktualisieren von Beleuchtungsfiltern kann rechenintensiv sein, drosseln Sie bei Bedarf mit requestAnimationFrame.

Siehe auch

SVGFEPointLightElement SVGFEPointLightElement.y SVGFEPointLightElement.z SVGAnimatedNumber SVGFESpotLightElement SVGFEDiffuseLightingElement SpeechSynthesisUtterance.text