SVGFETurbulenceElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETurbulenceElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFETurbulenceElement gibt die Breite des Teilbereichs (filter primitive subregion) zurück, in dem das Turbulenz- bzw. Rauschmuster des <feTurbulence>-Elements erzeugt wird. Sie spiegelt das SVG-Attribut width wider und stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes, das auch x, y, height und result bereitstellt.

Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedLength-Objekt. Über baseVal liest bzw. setzt man den im Markup (oder per Skript) festgelegten Grundwert, über animVal den aktuell wirksamen Wert, etwa während einer SMIL-Animation. Beide sind SVGLength-Objekte mit Eigenschaften wie value, valueInSpecifiedUnits und unitType.

Die Eigenschaft selbst ist schreibgeschützt: Man kann kein neues Objekt zuweisen. Den Wert ändert man stattdessen über width.baseVal.value, width.baseVal.newValueSpecifiedUnits() oder direkt per setAttribute('width', …). Fehlt das Attribut, gilt als Standardwert 100% der Breite des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert) und animVal (aktuell animierter Wert), jeweils vom Typ SVGLength.

Beispiele

Breite eines feTurbulence-Primitivs auslesen

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="rauschen">
    <feTurbulence id="turb" type="fractalNoise" baseFrequency="0.05" width="150" height="120" />
  </filter>
  <rect width="200" height="200" filter="url(#rauschen)" />
</svg>`;
document.body.insertAdjacentHTML('beforeend', svg);

const turb = document.getElementById('turb');
console.log(turb.width instanceof SVGAnimatedLength);
console.log(turb.width.baseVal.value);
console.log(turb.width.animVal.value);

true 150 150

Breite per Skript ändern

const turb = document.querySelector('feTurbulence');

// Wert in Benutzereinheiten setzen
turb.width.baseVal.value = 80;
console.log(turb.getAttribute('width'));

// Wert in Prozent setzen
turb.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(turb.getAttribute('width'));

80 50%

Einheit und Standardwert prüfen

const ns = 'http://www.w3.org/2000/svg';
const turb = document.createElementNS(ns, 'feTurbulence');

// Ohne width-Attribut gilt 100 %
const len = turb.width.baseVal;
const istProzent = len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE;
console.log(istProzent, len.valueInSpecifiedUnits);

true 100

// Wichtig · Fallstricke

Schreibgeschützt: turb.width = 100 hat keine Wirkung (im Strict Mode ein TypeError). Ändern Sie stattdessen width.baseVal oder das Attribut.
baseVal.value bei Prozentangaben erfordert einen Bezug zum Filterbereich; bei nicht eingehängten Elementen kann der Wert in Benutzereinheiten 0 oder unerwartet sein. Nutzen Sie dann valueInSpecifiedUnits.
animVal ist immer schreibgeschützt; Schreibzugriffe werfen einen NoModificationAllowedError.
Die Interpretation der Einheiten hängt vom Attribut primitiveUnits des umgebenden <filter> ab (userSpaceOnUse vs. objectBoundingBox).
Negative Werte sind ungültig und deaktivieren das Primitiv; 0 ergibt einen leeren Bereich.
Kompatibilität: In allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFETurbulenceElement SVGFETurbulenceElement.height SVGFETurbulenceElement.x SVGFETurbulenceElement.y SVGAnimatedLength SVGLength