SVGFEMergeElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMergeElement.width

Beschreibung

Die Eigenschaft width der Schnittstelle SVGFEMergeElement steht für das width-Attribut eines <feMerge>-Elements. Sie legt die Breite des Filterprimitiv-Teilbereichs fest, also des rechteckigen Bereichs, in dem das Ergebnis der Zusammenführung berechnet und ausgegeben wird. Pixel außerhalb dieses Bereichs werden abgeschnitten.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Über baseVal liest oder setzt du den im Markup festgelegten Wert. animVal liefert den aktuellen Wert, auch während einer SMIL-Animation (<animate>). Schreibgeschützt ist nur der Verweis auf das Objekt selbst. Die Länge in baseVal kannst du trotzdem ändern, zum Beispiel über value, valueAsString oder newValueSpecifiedUnits().

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: Bei userSpaceOnUse (Standard) gelten Benutzereinheiten, bei objectBoundingBox Bruchteile der Begrenzungsbox des gefilterten Elements.

Die Eigenschaft stammt aus dem gemeinsamen Mixin SVGFilterPrimitiveStandardAttributes. Deshalb verhält sie sich bei allen Filterprimitiven gleich, etwa bei SVGFEBlendElement oder SVGFEGaussianBlurElement, zusammen mit x, y, height und result.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (schreibgeschützter aktueller Wert als SVGLength) für die Breite des Filterprimitiv-Teilbereichs.

Beispiele

Breite eines feMerge-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="schatten">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <feMerge id="merge" width="150">
      <feMergeNode in="blur"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>`;
document.body.append(svg);

const merge = svg.querySelector('#merge');
console.log(merge.width instanceof SVGAnimatedLength);
console.log(merge.width.baseVal.value);
console.log(merge.width.animVal.value);

true 150 150

Standardwert prüfen, wenn kein width-Attribut gesetzt ist

const merge = document.createElementNS('http://www.w3.org/2000/svg', 'feMerge');
const len = merge.width.baseVal;

// Ohne Attribut gilt 100 %
console.log(len.valueAsString);
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

100% true

Breite dynamisch ändern

const merge = document.querySelector('feMerge');

// Die Eigenschaft selbst ist schreibgeschützt, baseVal lässt sich aber ändern
merge.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(merge.getAttribute('width'));

// Alternativ direkt als Zeichenkette
merge.width.baseVal.valueAsString = '200';
console.log(merge.getAttribute('width'));

50% 200

// Wichtig · Fallstricke

Nicht direkt zuweisen: merge.width = 100 hat keine Wirkung und löst im Strict Mode einen TypeError aus. Nutze merge.width.baseVal.value oder setAttribute('width', …).
Mit baseVal.value bekommst du Benutzereinheiten. Bei Prozentwerten kann der berechnete Wert je nach Browser von valueInSpecifiedUnits abweichen oder sich auf den Viewport statt auf den Filterbereich beziehen. Für Prozentwerte ist valueAsString zuverlässiger.
Die Wirkung hängt von primitiveUnits des umgebenden <filter> ab. Bei objectBoundingBox bedeutet 1 die volle Breite der Begrenzungsbox, nicht 1 Pixel.
Ist der Teilbereich zu schmal, werden Schatten oder Weichzeichnungen hart abgeschnitten.
Kompatibilität: Die Eigenschaft wird seit Langem von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Der Internet Explorer unterstützte SVG-Filter erst ab Version 10.

Siehe auch

SVGFEMergeElement SVGFEMergeElement.height SVGFEMergeElement.x SVGFEMergeElement.y SVGFEMergeElement.result SVGAnimatedLength SVGLength SVGFEMergeNodeElement