SVGFECompositeElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.width

Beschreibung

Die schreibgeschützte Eigenschaft width der Schnittstelle SVGFECompositeElement gibt das Attribut width des zugehörigen <feComposite>-Elements wieder. Sie legt die horizontale Ausdehnung der Filterprimitiv-Unterregion fest. Das ist der rechteckige Bereich, in dem das Ergebnis der Komposition (z. B. over, in, arithmetic) berechnet und abgeschnitten wird.

Der Wert ist ein SVGAnimatedLength-Objekt mit zwei Unterobjekten: baseVal enthält den im Markup bzw. per Skript gesetzten Grundwert, animVal den aktuell wirksamen Wert, also gegebenenfalls den von einer SMIL-Animation veränderten. Beide sind SVGLength-Objekte mit Eigenschaften wie value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.

Fehlt das Attribut, gilt standardmäßig 100% der Filterregion. Wie Prozentwerte bzw. Zahlen interpretiert werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox). Die Eigenschaft eignet sich, um Filterregionen per Skript auszulesen, dynamisch anzupassen (über baseVal) oder bei Fehlersuche abgeschnittene Filtereffekte nachzuvollziehen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (jeweils SVGLength), das die Breite der Filterprimitiv-Unterregion beschreibt.

Beispiele

Breite eines feComposite-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="f" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feFlood flood-color="tomato" result="flood"/>
    <feComposite id="comp" in="flood" in2="SourceGraphic" operator="in" width="120" height="80"/>
  </filter>`;
document.body.append(svg);

const comp = svg.querySelector('#comp');
console.log(comp.width.baseVal.value);
console.log(comp.width.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

120 true

Breite per Skript ändern

const comp = document.querySelector('feComposite');

// Neue Breite in Benutzereinheiten setzen
comp.width.baseVal.value = 150;
console.log(comp.getAttribute('width'));

// Alternativ mit Einheit über newValueSpecifiedUnits
comp.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(comp.width.baseVal.valueAsString);

150 50%

Standardwert bei fehlendem Attribut

const svgNS = 'http://www.w3.org/2000/svg';
const comp = document.createElementNS(svgNS, 'feComposite');

console.log(comp.hasAttribute('width'));
console.log(comp.width.baseVal.valueAsString);

false 0 (je nach Browser; wirksam ist dennoch 100 % der Filterregion)

// Wichtig · Fallstricke

Die Eigenschaft selbst ist schreibgeschützt. comp.width = 100 bewirkt nichts (im Strict Mode wird ein TypeError geworfen). Ändern Sie stattdessen comp.width.baseVal.value oder das Attribut über setAttribute('width', …).
animVal ist ebenfalls schreibgeschützt. Schreibzugriffe darauf lösen einen NoModificationAllowedError aus.
Fehlt das Attribut, liefert baseVal in vielen Browsern 0. Wirksam ist aber die Vorgabe 100%. Deshalb nicht blind auf den gelesenen Wert verlassen, sondern vorher hasAttribute('width') prüfen.
Bei primitiveUnits=\"objectBoundingBox\" werden Werte als Bruchteil der Begrenzungsbox interpretiert (z. B. 0.5 = 50 %). baseVal.value wird dabei nicht in Pixel umgerechnet.
Negative Werte sind ein Fehler, 0 deaktiviert das Filterprimitiv. Ein zu kleiner Wert schneidet den Effekt sichtbar ab.
Die Eigenschaft wird von allen modernen Browsern unterstützt (sie stammt aus der gemeinsamen Mixin-Schnittstelle SVGFilterPrimitiveStandardAttributes).

Siehe auch

SVGFECompositeElement SVGFECompositeElement.height SVGFECompositeElement.x SVGFECompositeElement.y SVGAnimatedLength SVGLength SVGFilterElement