SVGFEDiffuseLightingElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDiffuseLightingElement.x

Beschreibung

Die Eigenschaft x von SVGFEDiffuseLightingElement gibt das x-Attribut eines <feDiffuseLighting>-Elements zurück. Es legt die minimale horizontale Koordinate des Teilbereichs fest, in dem das Filterprimitiv arbeitet (filter primitive subregion). Die Eigenschaft stammt aus der Mixin-Schnittstelle SVGFilterPrimitiveStandardAttributes und ist bei allen Filterprimitiven gleich.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Über baseVal liest oder änderst du den im Markup gesetzten Wert. animVal enthält dagegen den aktuellen, eventuell per SMIL animierten Wert und kann nur gelesen werden. Die Eigenschaft x selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen, das vorhandene SVGLength-Objekt aber verändern.

Wie der Wert zu deuten ist, hängt vom Attribut primitiveUnits des übergeordneten <filter> ab. Bei userSpaceOnUse (Standard) ist er eine Koordinate im Nutzerkoordinatensystem, bei objectBoundingBox ein Anteil der Bounding-Box des gefilterten Elements. Fehlt das Attribut, beträgt der Wert 0%, der Teilbereich deckt dann den ganzen Filterbereich ab.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbare SVGLength) und animVal (schreibgeschützte, animierte SVGLength) für das x-Attribut.

Beispiele

x-Koordinate auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="licht">
//     <feDiffuseLighting id="diffus" x="10" y="20" width="150" height="150" lighting-color="white">
//       <fePointLight x="50" y="50" z="40" />
//     </feDiffuseLighting>
//   </filter>
//   <rect width="200" height="200" filter="url(#licht)" />
// </svg>

const diffus = document.getElementById('diffus');
console.log(diffus.x.baseVal.value);    // Wert in Nutzereinheiten
console.log(diffus.x.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

10 true

Filter-Teilbereich per Skript verschieben

const diffus = document.querySelector('feDiffuseLighting');

// Vorhandenes SVGLength-Objekt ändern, statt x neu zuzuweisen
diffus.x.baseVal.value = 40;
console.log(diffus.getAttribute('x'));

// Einheit wechseln: 25 Prozent
diffus.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(diffus.getAttribute('x'));

40 25%

Lichtkegel animiert wandern lassen

const diffus = document.querySelector('feDiffuseLighting');
let pos = 0;

const schritt = () => {
  pos = (pos + 1) % 150;
  diffus.x.baseVal.value = pos;
  requestAnimationFrame(schritt);
};
requestAnimationFrame(schritt);

// Wichtig · Fallstricke

Schreibgeschützt: diffus.x = 5 hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändere stattdessen x.baseVal.value oder rufe setAttribute('x', …) auf.
animVal kann nur gelesen werden. Ein Schreibversuch löst eine NoModificationAllowedError-Ausnahme aus.
Ist primitiveUnits="objectBoundingBox" gesetzt, sind Werte wie 0.1 Anteile der Bounding-Box. baseVal.value rechnet sie nicht in Pixel um.
Das x des Primitivs ist nicht dasselbe wie das x einer Lichtquelle wie <fePointLight> (SVGFEPointLightElement.x). Die Lichtquelle hat ihre eigene Position.
Große Filter-Teilbereiche mit Beleuchtungseffekten brauchen viel Rechenzeit. Beschränke den Bereich mit x, y, width und height, besonders wenn du ihn animierst.
Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFEDiffuseLightingElement SVGFEDiffuseLightingElement.y SVGFEDiffuseLightingElement.width SVGFEDiffuseLightingElement.height SVGAnimatedLength SVGLength