SVGFETileElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETileElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFETileElement steht für das Attribut width eines <feTile>-Elements. Sie legt die Breite des Teilbereichs fest, in dem das Filterprimitiv arbeitet (filter primitive subregion). <feTile> füllt diesen Bereich mit Kacheln aus dem Eingabebild (in). Deshalb bestimmen x, y, width und height des Eingabe-Primitivs die Größe einer Kachel, während die Werte am <feTile> selbst die gesamte gekachelte Fläche festlegen.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt und keine einfache Zahl. Über baseVal erreichst du den statischen Grundwert als SVGLength. animVal enthält den aktuellen Wert, also gegebenenfalls den per SMIL animierten Wert, und lässt sich nur lesen. Die Eigenschaft width selbst ist schreibgeschützt. Den Wert änderst du über width.baseVal.value, width.baseVal.newValueSpecifiedUnits() oder direkt mit setAttribute('width', …).

Fehlt das Attribut, gilt der Standardwert 100%. Der Teilbereich deckt dann die gesamte Filterregion ab. Wie Prozentangaben und Zahlen gedeutet werden, hängt von primitiveUnits des umgebenden <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (veränderbare SVGLength) und animVal (nur lesbare, aktuell animierte SVGLength) für die Breite des Teilbereichs des Filterprimitivs.

Beispiele

Breite eines feTile-Elements auslesen

document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="200">
  <filter id="kachel" x="0" y="0" width="100%" height="100%" primitiveUnits="userSpaceOnUse">
    <feFlood x="0" y="0" width="40" height="40" flood-color="tomato" result="quadrat"/>
    <feTile in="quadrat" x="0" y="0" width="160" height="160"/>
  </filter>
  <rect width="200" height="200" filter="url(#kachel)"/>
</svg>`);

const tile = document.querySelector('feTile');
console.log(tile.width instanceof SVGAnimatedLength);
console.log(tile.width.baseVal.value);
console.log(tile.width.baseVal.valueAsString);

true 160 160

Gekachelte Fläche per Skript vergrößern

const tile = document.querySelector('feTile');

// width selbst ist schreibgeschützt, baseVal dagegen veränderbar
tile.width.baseVal.value = 200;
console.log(tile.getAttribute('width'));

// Alternativ mit Einheit setzen
tile.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(tile.getAttribute('width'));

200 50%

Standardwert bei fehlendem Attribut

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

const { baseVal } = tile.width;
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(baseVal.valueAsString);

true 100%

// Wichtig · Fallstricke

Keine Zahl: tile.width gibt ein Objekt zurück. Vergleiche wie tile.width > 100 funktionieren deshalb nicht. Nutze tile.width.baseVal.value.
Zuweisung wirkungslos: tile.width = 50 ändert nichts und wirft im Strict Mode einen TypeError.
Prozentwerte: Bei %-Einheiten kann baseVal.value je nach Browser von der Bezugsgröße abhängen oder unerwartet ausfallen. Für die ursprüngliche Angabe nutze valueInSpecifiedUnits bzw. valueAsString.
Kachelgröße: Die Größe einer Kachel legt nicht <feTile> fest, sondern der Teilbereich des Eingabe-Primitivs. Ohne eigene Maße ist die Eingabe so groß wie die ganze Filterregion, und es entsteht sichtbar keine Kachelung.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Der Internet Explorer unterstützt die Eigenschaft ab Version 10.

Siehe auch

SVGFETileElement SVGFETileElement.height SVGFETileElement.x SVGFETileElement.y SVGFETileElement.in1 SVGAnimatedLength SVGLength