SVGFEDiffuseLightingElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDiffuseLightingElement.width

Beschreibung

Die Eigenschaft width der Schnittstelle SVGFEDiffuseLightingElement steht für das width-Attribut des SVG-Elements <feDiffuseLighting>. Sie legt die horizontale Größe des Filterprimitiv-Teilbereichs fest, also des Rechtecks, auf das das Ergebnis der diffusen Beleuchtung beschnitten wird.

Der Wert ist ein SVGAnimatedLength-Objekt. Über baseVal liest und setzt du den im Markup festgelegten Grundwert (ein SVGLength). animVal enthält den aktuell wirksamen Wert, falls gerade eine SMIL-Animation läuft. Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen, aber den Wert über baseVal.value, baseVal.valueAsString oder newValueSpecifiedUnits() ändern.

Fehlt das Attribut, gilt standardmäßig 100% des Filterbereichs. Wie Prozentwerte und Zahlen gedeutet werden, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox). Praktisch ist das, wenn du einen Lichteffekt per Skript nur auf einen Teil des Filterbereichs anwenden oder die Breite dynamisch anpassen willst.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert als SVGLength) und animVal (aktuell animierter Wert, schreibgeschützt).

Beispiele

Breite des Filterprimitivs auslesen

// Markup:
// <svg width="200" height="200">
//   <filter id="licht" primitiveUnits="userSpaceOnUse">
//     <feDiffuseLighting id="diffus" x="0" y="0" width="150" height="150"
//       lighting-color="white" surfaceScale="2">
//       <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.width.baseVal.value);
console.log(diffus.width.baseVal.valueAsString);
console.log(diffus.width.animVal.value);

150 150 150

Breite zur Laufzeit ändern

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

// Setzt den Grundwert direkt als Zahl in Benutzereinheiten
diffus.width.baseVal.value = 80;
console.log(diffus.getAttribute('width'));

// Alternativ mit Einheit über einen String
diffus.width.baseVal.valueAsString = '50%';
console.log(diffus.getAttribute('width'));

80 50%

Lichtbereich per Schieberegler steuern

// <input type="range" id="breite" min="10" max="200" value="150">
const diffus = document.getElementById('diffus');
const regler = document.getElementById('breite');

regler.addEventListener('input', () => {
  // Wert in Benutzereinheiten (px) setzen
  diffus.width.baseVal.newValueSpecifiedUnits(
    SVGLength.SVG_LENGTHTYPE_NUMBER,
    Number(regler.value)
  );
});

// Wichtig · Fallstricke

Schreibgeschützt: diffus.width = 100 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändere stattdessen width.baseVal oder verwende setAttribute('width', …).
animVal ist immer schreibgeschützt. Ohne laufende Animation entspricht es baseVal.
Ist das Attribut nicht gesetzt, liefert baseVal den Standardwert 100%. baseVal.value gibt Prozentwerte je nach Browser unterschiedlich zurück, weil der Bezug zum Filterbereich nicht immer aufgelöst wird. Nutze für verlässliche Ergebnisse valueAsString.
Bei primitiveUnits=\"objectBoundingBox\" werden Zahlen als Anteile des Begrenzungsrahmens gelesen (z. B. 0.5 = halbe Breite).
Ein negativer Wert ist ein Fehler, und 0 schaltet das Filterprimitiv ab: Das Ergebnis ist dann transparent schwarz.
Wird von allen modernen Browsern unterstützt. Die Eigenschaft ist über SVGFilterPrimitiveStandardAttributes bei allen fe*-Elementen gleich vorhanden.

Siehe auch

SVGFEDiffuseLightingElement SVGFEDiffuseLightingElement.height SVGFEDiffuseLightingElement.x SVGFEDiffuseLightingElement.y SVGAnimatedLength SVGLength SVGFESpecularLightingElement.width