SVGFEComponentTransferElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEComponentTransferElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFEComponentTransferElement gibt das width-Attribut des zugehörigen <feComponentTransfer>-Elements zurück. Zusammen mit x, y und height legt sie den Filterprimitiv-Teilbereich fest. Das ist das Rechteck, auf das die Farbkomponenten-Transformation begrenzt wird.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Über baseVal lesen und ändern Sie den im Markup gesetzten Grundwert. animVal liefert den aktuellen Wert, der gerade während einer SMIL-Animation gilt, und ist nur lesbar. Die Eigenschaft selbst ist schreibgeschützt. Sie ändern also nicht width, sondern width.baseVal.value oder das Attribut über setAttribute().

Fehlt das Attribut, gilt standardmäßig 100% der Breite des Filterbereichs. Ob Prozentwerte und Zahlen auf die Bounding-Box oder das Benutzerkoordinatensystem bezogen werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbare SVGLength) und animVal (nur lesbare SVGLength, animierter Wert) für die Breite des Filterprimitiv-Teilbereichs.

Beispiele

Breite eines feComponentTransfer auslesen

// <svg><filter id="f"><feComponentTransfer id="ct" width="80%">…</feComponentTransfer></filter></svg>
const ct = document.getElementById('ct');
const { baseVal } = ct.width;

console.log(baseVal.valueAsString);
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

80% true

Breite zur Laufzeit ändern

const ct = document.querySelector('#f feComponentTransfer');

// Breite in Benutzereinheiten auf 150 setzen
ct.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 150);

console.log(ct.getAttribute('width'));

150

Filter per Skript erzeugen und Breite prüfen

const NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(NS, 'filter');
const ct = document.createElementNS(NS, 'feComponentTransfer');
filter.append(ct);

// Ohne Attribut gilt der Standardwert 100 %
console.log(ct.width.baseVal.valueAsString);

ct.setAttribute('width', '50%');
console.log(ct.width.baseVal.valueInSpecifiedUnits);

100% 50

// Wichtig · Fallstricke

ct.width = 100 funktioniert nicht: Die Eigenschaft ist schreibgeschützt. Die Zuweisung wird im Nicht-Strict-Modus stillschweigend ignoriert und löst im Strict-Modus einen TypeError aus. Ändern Sie stattdessen width.baseVal.
baseVal.value liefert bei Prozentwerten einen umgerechneten Wert in Benutzereinheiten. Ist das Element nicht gerendert, kann dieser Wert 0 sein oder ungenau ausfallen. Für die ursprüngliche Angabe verwenden Sie valueAsString oder valueInSpecifiedUnits.
Ein Filterprimitiv-Teilbereich, der größer ist als der Filterbereich des <filter>-Elements, wird auf den Filterbereich zugeschnitten.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Sie stammt aus der Mixin-Schnittstelle SVGFilterPrimitiveStandardAttributes.

Siehe auch

SVGFEComponentTransferElement SVGFEComponentTransferElement.height SVGFEComponentTransferElement.x SVGFEComponentTransferElement.y SVGAnimatedLength SVGLength SVGFEComponentTransferElement.result