SVGFEPointLightElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEPointLightElement extends SVGElement

Beschreibung

Die Schnittstelle SVGFEPointLightElement ist die DOM-Darstellung des SVG-Elements <fePointLight>. Eine Punktlichtquelle strahlt von einer festen Position im Raum gleichmäßig in alle Richtungen, ähnlich wie eine Glühbirne. Das Element steht immer als Kind in einem Beleuchtungsfilter, also in <feDiffuseLighting> oder <feSpecularLighting>.

Die Schnittstelle erbt von SVGElement und stellt drei Eigenschaften bereit. Sie sind nur lesbar und geben jeweils ein SVGAnimatedNumber zurück:

x: X-Koordinate der Lichtquelle (Attribut x)
y: Y-Koordinate der Lichtquelle (Attribut y)
z: Z-Koordinate, also die Höhe über der Zeichenfläche (Attribut z)

Du setzt die Schnittstelle ein, wenn du Lichteffekte per JavaScript dynamisch steuern willst. Typische Beispiele sind ein Glanzlicht, das dem Mauszeiger folgt, oder eine animierte Lichtquelle auf einer Relief-Textur. Den aktuellen Wert liest oder schreibst du über element.x.baseVal. Den gerade animierten Wert (z. B. durch SMIL) liest du über element.x.animVal.

Die Koordinaten beziehen sich auf das Koordinatensystem, das das Attribut primitiveUnits des umgebenden <filter>-Elements festlegt. Standardmäßig ist das userSpaceOnUse.

Rückgabewert

Typ

SVGFEPointLightElement

Beschreibung

Eine Instanz entsteht über document.createElementNS('http://www.w3.org/2000/svg', 'fePointLight') oder durch Abfrage eines vorhandenen <fePointLight>-Elements im DOM.

Beispiele

Element per JavaScript erzeugen und einbinden

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '200');

const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'licht';

const specular = document.createElementNS(SVG_NS, 'feSpecularLighting');
specular.setAttribute('specularExponent', '20');
specular.setAttribute('lighting-color', '#ffffff');
specular.setAttribute('result', 'glanz');

const light = document.createElementNS(SVG_NS, 'fePointLight');
light.setAttribute('x', '50');
light.setAttribute('y', '50');
light.setAttribute('z', '120');

specular.append(light);
filter.append(specular);

const composite = document.createElementNS(SVG_NS, 'feComposite');
composite.setAttribute('in', 'SourceGraphic');
composite.setAttribute('in2', 'glanz');
composite.setAttribute('operator', 'arithmetic');
composite.setAttribute('k1', '0');
composite.setAttribute('k2', '1');
composite.setAttribute('k3', '1');
composite.setAttribute('k4', '0');
filter.append(composite);

const circle = document.createElementNS(SVG_NS, 'circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '100');
circle.setAttribute('r', '80');
circle.setAttribute('fill', 'steelblue');
circle.setAttribute('filter', 'url(#licht)');

svg.append(filter, circle);
document.body.append(svg);

console.log(light instanceof SVGFEPointLightElement);
console.log(light.z.baseVal);

true 120

Lichtquelle folgt dem Mauszeiger

// Voraussetzung: <svg id="bühne"> mit <fePointLight id="punktlicht"> im Filter
const svg = document.getElementById('bühne');
const light = document.getElementById('punktlicht');

svg.addEventListener('pointermove', (event) => {
  const rect = svg.getBoundingClientRect();
  // Direkt über baseVal schreiben, ohne String-Umwandlung
  light.x.baseVal = event.clientX - rect.left;
  light.y.baseVal = event.clientY - rect.top;
});

Aktuelle Koordinaten auslesen

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

const position = {
  x: light.x.baseVal,
  y: light.y.baseVal,
  z: light.z.baseVal,
  // animVal berücksichtigt laufende SMIL-Animationen
  zAnimiert: light.z.animVal
};

console.log(position);

{ x: 50, y: 50, z: 120, zAnimiert: 120 }

// Wichtig · Fallstricke

Namensraum beachten: document.createElement('fePointLight') erzeugt nur ein unbekanntes HTML-Element ohne Wirkung. Verwende immer createElementNS mit dem SVG-Namensraum http://www.w3.org/2000/svg.
Nur lesbare Eigenschaften: light.x = 10 funktioniert nicht. Schreibe stattdessen light.x.baseVal = 10 oder verwende setAttribute('x', '10').
Die Z-Koordinate zählt: Ist z sehr klein (Standardwert 0), liegt das Licht in der Zeichenebene. Die Beleuchtung ist dann kaum sichtbar oder wirkt sehr streifend. Für sichtbare Effekte sind meist Werte im Bereich der Grafikgröße sinnvoll.
Nur eine Lichtquelle pro Filter: Ein Beleuchtungsfilter wertet nur ein einziges Licht-Kindelement aus, also fePointLight, feSpotLight oder feDistantLight.
Leistung: Beleuchtungsfilter sind rechenintensiv. Wenn du die Lichtposition bei jedem pointermove änderst, können große Flächen ruckeln. Drossele die Aktualisierung bei Bedarf, z. B. mit requestAnimationFrame.
Kompatibilität: Die Schnittstelle wird in allen modernen Browsern unterstützt. Es gibt kleine Darstellungsunterschiede, weil die Lichtberechnung nicht überall gleich umgesetzt ist, vor allem im Zusammenspiel mit primitiveUnits="objectBoundingBox".

Siehe auch

SVGFESpotLightElement SVGFEDistantLightElement SVGFECompositeElement SVGFEFuncGElement SVGFEImageElement