SVGFESpotLightElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFESpotLightElement extends SVGElement

Beschreibung

Die Schnittstelle SVGFESpotLightElement gehört zum DOM-Objekt des SVG-Elements <feSpotLight>. Dieses Element beschreibt eine Lichtquelle, die wie ein Scheinwerfer von einem Punkt im Raum (x, y, z) in Richtung eines Zielpunkts (pointsAtX, pointsAtY, pointsAtZ) strahlt. Allein zeichnet es nichts, sondern muss als Kindelement eines <feDiffuseLighting>- oder <feSpecularLighting>-Filterprimitivs stehen.

Alle Eigenschaften sind schreibgeschützte animierbare Werte vom Typ SVGAnimatedNumber:

x, y, z: Position der Lichtquelle im Koordinatensystem, das über primitiveUnits des Filters festgelegt ist.
pointsAtX, pointsAtY, pointsAtZ: Punkt, auf den der Lichtkegel zeigt.
specularExponent: Stärke der Bündelung zur Kegelmitte hin (Standard 1).
limitingConeAngle: halber Öffnungswinkel des Lichtkegels in Grad; außerhalb gibt es kein Licht.

Über baseVal liest oder setzt man den Attributwert, über animVal den aktuell (ggf. durch SMIL-Animation) wirksamen Wert. Damit lassen sich Lichteffekte per JavaScript dynamisch steuern, etwa ein Scheinwerfer, der dem Mauszeiger folgt.

Rückgabewert

Typ

SVGFESpotLightElement

Beschreibung

Entsteht durch document.createElementNS("http://www.w3.org/2000/svg", "feSpotLight") oder beim Parsen von SVG-Markup; ein eigener Konstruktor existiert nicht.

Beispiele

Spotlight-Filter per JavaScript erzeugen

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

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

const lighting = document.createElementNS(SVG_NS, 'feDiffuseLighting');
lighting.setAttribute('in', 'SourceGraphic');
lighting.setAttribute('lighting-color', '#ffe9a8');

const spot = document.createElementNS(SVG_NS, 'feSpotLight');
spot.x.baseVal = 150;
spot.y.baseVal = 20;
spot.z.baseVal = 200;
spot.pointsAtX.baseVal = 150;
spot.pointsAtY.baseVal = 150;
spot.limitingConeAngle.baseVal = 25;
spot.specularExponent.baseVal = 8;

lighting.append(spot);
filter.append(lighting);

const rect = document.createElementNS(SVG_NS, 'rect');
rect.setAttribute('width', '300');
rect.setAttribute('height', '200');
rect.setAttribute('fill', '#888');
rect.setAttribute('filter', 'url(#spot)');

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

console.log(spot instanceof SVGFESpotLightElement);
console.log(spot.getAttribute('limitingConeAngle'));

true 25

Scheinwerfer folgt der Maus

// Voraussetzung: <svg id="stage"> mit <feSpotLight id="light"> im Filter
const svg = document.getElementById('stage');
const light = document.getElementById('light');

svg.addEventListener('pointermove', (event) => {
  const rect = svg.getBoundingClientRect();
  light.pointsAtX.baseVal = event.clientX - rect.left;
  light.pointsAtY.baseVal = event.clientY - rect.top;
});

Vorhandene Werte auslesen

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

const info = {
  position: [light.x.baseVal, light.y.baseVal, light.z.baseVal],
  ziel: [light.pointsAtX.baseVal, light.pointsAtY.baseVal, light.pointsAtZ.baseVal],
  kegel: light.limitingConeAngle.baseVal,
  exponent: light.specularExponent.animVal
};
console.log(info);

{ position: [150, 20, 200], ziel: [150, 150, 0], kegel: 25, exponent: 8 }

// Wichtig · Fallstricke

SVG-Elemente müssen mit createElementNS() und dem SVG-Namensraum erzeugt werden; document.createElement('feSpotLight') liefert ein HTMLUnknownElement ohne diese Eigenschaften.
Die Eigenschaften selbst sind schreibgeschützt: spot.x = 10 hat keine Wirkung, korrekt ist spot.x.baseVal = 10 oder setAttribute('x', '10').
Attributnamen unterscheiden Groß-/Kleinschreibung (pointsAtX, limitingConeAngle, specularExponent).
Die Koordinaten beziehen sich auf primitiveUnits des Filters (Standard userSpaceOnUse). Bei objectBoundingBox sind Werte zwischen 0 und 1 zu erwarten; z wird dabei browserabhängig unterschiedlich interpretiert.
Ohne limitingConeAngle gibt es keine Kegelbegrenzung. Kanten wirken je nach Browser unterschiedlich weich.
Beleuchtungsfilter sind rechenintensiv; bei großen Flächen und häufigen Updates (z. B. pointermove) mit requestAnimationFrame drosseln.
Wird von allen modernen Browsern unterstützt; kleinere Unterschiede beim Rendering gibt es zwischen den Engines.

Siehe auch

SVGFEPointLightElement SVGFEDistantLightElement SVGFEOffsetElement SVGFETileElement SVGPolygonElement