SVGFESpotLightElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpotLightElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGFESpotLightElement entspricht dem Attribut x des SVG-Elements <feSpotLight>. Sie gibt die horizontale Position der Spotlicht-Quelle im Koordinatensystem an, das über das Attribut primitiveUnits des umgebenden <filter>-Elements festgelegt wird. Fehlt das Attribut, ist der Wert 0.

Die Eigenschaft ist schreibgeschützt und liefert ein SVGAnimatedNumber-Objekt. Den eigentlichen Zahlenwert liest und setzt man über x.baseVal. x.animVal enthält den aktuellen, eventuell durch SMIL-Animation (<animate>) veränderten Wert und lässt sich nur lesen.

Gebraucht wird die Eigenschaft vor allem dann, wenn man Lichteffekte in <feDiffuseLighting> oder <feSpecularLighting> per Skript verändern will, etwa damit ein Spotlicht dem Mauszeiger folgt. Zusammen mit y, z sowie pointsAtX, pointsAtY und pointsAtZ legt sie Position und Ausrichtung des Lichtkegels fest.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, number) und animVal (nur lesbar, number) für die x-Koordinate der Lichtquelle.

Beispiele

x-Koordinate auslesen

// <svg><filter id="licht"><feSpecularLighting><feSpotLight id="spot" x="120" y="40" z="80"/></feSpecularLighting></filter></svg>
const spot = document.querySelector('#spot');

console.log(spot.x instanceof SVGAnimatedNumber);
console.log(spot.x.baseVal);
console.log(spot.x.animVal);

true 120 120

Spotlicht folgt dem Mauszeiger

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

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

Filter komplett per Skript erzeugen

const NS = 'http://www.w3.org/2000/svg';
const lighting = document.createElementNS(NS, 'feDiffuseLighting');
const spot = document.createElementNS(NS, 'feSpotLight');

spot.x.baseVal = 50;
spot.y.baseVal = 30;
spot.z.baseVal = 100;
lighting.append(spot);

// baseVal wird ins Attribut übernommen
console.log(spot.getAttribute('x'));

50

// Wichtig · Fallstricke

Kein direktes Zuweisen: spot.x = 10 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Man setzt den Wert immer über spot.x.baseVal oder setAttribute('x', …).
Einheiten: Der Wert hängt von primitiveUnits des Filters ab. Bei objectBoundingBox ist er ein Bruchteil der Bounding-Box (z. B. 0.5) und kein Pixelwert.
animVal: Läuft eine SMIL-Animation, weicht animVal von baseVal ab. Schreibzugriffe auf animVal sind nicht erlaubt.
Namensverwechslung: Anders als bei vielen anderen SVG-Elementen ist x hier ein SVGAnimatedNumber und kein SVGAnimatedLength. Deshalb gibt es kein .value und keine Einheitenumrechnung.
Browser-Unterstützung: Wird in allen modernen Browsern unterstützt. Die Darstellung von Lichtfiltern kann sich zwischen den Engines leicht unterscheiden, und häufiges Aktualisieren kostet Rechenleistung. Bei Mausverfolgung sollte man die Updates deshalb über requestAnimationFrame drosseln.

Siehe auch

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