SVGFESpecularLightingElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGFESpecularLightingElement gibt das x-Attribut des Filterprimitivs <feSpecularLighting> zurück. Dieses Attribut legt die horizontale Koordinate der linken oberen Ecke des Filterprimitiv-Teilbereichs (filter primitive subregion) fest, also des Rechtecks, auf das die Ausgabe dieses Primitivs begrenzt ist.

Der Wert ist ein SVGAnimatedLength-Objekt. Über baseVal liest oder ändert man den im Markup bzw. per Skript gesetzten Grundwert, über animVal den aktuellen, gegebenenfalls durch SMIL-Animation veränderten Wert. Die Eigenschaft selbst ist schreibgeschützt – Änderungen erfolgen über x.baseVal.value, x.baseVal.valueAsString oder setAttribute('x', …).

Ist das Attribut nicht gesetzt, entspricht der Teilbereich standardmäßig 0% des Filterbereichs. Wie der Wert interpretiert wird, hängt vom primitiveUnits-Attribut des übergeordneten <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (jeweils SVGLength), das die horizontale Position des Filterprimitiv-Teilbereichs beschreibt.

Beispiele

x-Wert eines feSpecularLighting-Elements auslesen

// <svg><filter id="glanz"><feSpecularLighting id="licht" x="10" y="10" width="200" height="100" specularExponent="20"><fePointLight x="50" y="50" z="100"/></feSpecularLighting></filter></svg>
const licht = document.getElementById('licht');
console.log(licht.x.baseVal.value);
console.log(licht.x.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

10 true

Element per Skript erzeugen und x setzen

const NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(NS, 'filter');
filter.id = 'spiegelung';
const spec = document.createElementNS(NS, 'feSpecularLighting');
spec.setAttribute('x', '25%');
filter.append(spec);
document.querySelector('svg defs')?.append(filter);

console.log(spec.x.baseVal.valueAsString);
console.log(spec.x.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

25% true

Teilbereich dynamisch verschieben

const licht = document.querySelector('feSpecularLighting');
let pos = 0;

const schritt = () => {
  pos = (pos + 2) % 200;
  // Grundwert direkt ändern – das Attribut wird automatisch aktualisiert
  licht.x.baseVal.value = pos;
  requestAnimationFrame(schritt);
};
requestAnimationFrame(schritt);

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

2 (bzw. aktueller Wert)

// Wichtig · Fallstricke

Schreibgeschützt: licht.x = 50 hat keine Wirkung (im Strict Mode TypeError). Stattdessen licht.x.baseVal.value oder setAttribute('x', …) verwenden.
Nicht mit Lichtquellen verwechseln: Das x der Kindelemente <fePointLight>/<feSpotLight> ist ein SVGAnimatedNumber und bestimmt die Lichtposition – nicht den Teilbereich des Primitivs.
Bei primitiveUnits=\"objectBoundingBox\" werden Zahlen als Bruchteile der Bounding Box gedeutet (z. B. 0.1 = 10 %).
animVal spiegelt nur SMIL-Animationen wider, keine CSS-Animationen.
Wird von allen modernen Browsern unterstützt; x ist Teil des Mixins SVGFilterPrimitiveStandardAttributes und daher bei allen fe*-Elementen identisch verfügbar.

Siehe auch

SVGFESpecularLightingElement.y SVGFESpecularLightingElement.width SVGFESpecularLightingElement.height SVGFESpecularLightingElement SVGAnimatedLength SVGLength