SVGFETileElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETileElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFETileElement entspricht dem Attribut height des SVG-Elements <feTile>. Sie legt die vertikale Ausdehnung des Filterprimitiv-Teilbereichs (filter primitive subregion) fest, also des Bereichs, in dem das Ergebnis dieses Primitivs berechnet und gültig ist.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Über baseVal liest oder ändert man den im Markup gesetzten Grundwert, über animVal den aktuell wirksamen Wert, auch während einer SMIL-Animation. Die Eigenschaft selbst ist schreibgeschützt, man kann ihr also kein neues Objekt zuweisen. Das enthaltene SVGLength unter baseVal lässt sich aber verändern, zum Beispiel über value, valueAsString oder newValueSpecifiedUnits().

<feTile> füllt seinen Teilbereich, indem es das Eingabebild (in) wiederholt nebeneinander setzt. Wie groß die einzelne Kachel ist, bestimmen deshalb x, y, width und height des Eingabe-Primitivs. Die height des <feTile>-Elements selbst legt dagegen fest, wie hoch die gekachelte Fläche insgesamt wird.

Fehlt das Attribut, gilt standardmäßig 100% des Filterbereichs. Wie Prozentwerte und reine Zahlen ausgewertet werden, hängt von primitiveUnits am <filter>-Element ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit den Eigenschaften baseVal (veränderbarer Grundwert, SVGLength) und animVal (aktuell wirksamer, schreibgeschützter Wert, SVGLength).

Beispiele

Höhe eines feTile-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="kachel" x="0" y="0" width="100%" height="100%">
    <feFlood x="0" y="0" width="20" height="20" flood-color="teal" result="stein"/>
    <feTile in="stein" height="150"/>
  </filter>`;
document.body.append(svg);

const tile = svg.querySelector('feTile');
console.log(tile.height.baseVal.value);
console.log(tile.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

150 true

Höhe per Skript ändern

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

// Grundwert setzen: das Attribut height wird dabei mit aktualisiert
tile.height.baseVal.value = 80;
console.log(tile.getAttribute('height'));

// Mit Einheit setzen
tile.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50
);
console.log(tile.getAttribute('height'));

80 50%

Grundwert und animierten Wert vergleichen

const tile = document.querySelector('feTile');
const { baseVal, animVal } = tile.height;

// Ohne laufende <animate>-Animation sind beide Werte gleich
console.log(baseVal.valueAsString, animVal.valueAsString);

// Falsch: die Eigenschaft selbst ist schreibgeschützt
tile.height = 200; // bleibt wirkungslos (im Strict-Modus TypeError)
console.log(tile.height instanceof SVGAnimatedLength);

50% 50% true

// Wichtig · Fallstricke

Schreibgeschützt: Eine direkte Zuweisung an tile.height bleibt ohne Wirkung und löst im Strict-Modus einen TypeError aus. Ändern lässt sich der Wert nur über height.baseVal oder setAttribute('height', …).
animVal nicht verändern: Ein Schreibzugriff auf animVal wirft eine NoModificationAllowedError-Ausnahme.
Kachelgröße ≠ height: Wie groß eine einzelne Kachel ist, bestimmt die Höhe des Eingabe-Primitivs. Die height von <feTile> legt nur die Gesamtfläche fest.
Prozentwerte: baseVal.value liefert bei Prozentangaben einen in Benutzereinheiten umgerechneten Wert, und der hängt vom Kontext ab. Die ursprüngliche Angabe bekommt man über valueInSpecifiedUnits oder valueAsString.
Negative Werte sind ungültig. Ein Wert von 0 schaltet die Wirkung des Primitivs ab.
Kompatibilität: Wird von allen aktuellen Browsern (Chrome, Firefox, Safari, Edge) unterstützt. Filtereffekte können viel Rechenleistung kosten, deshalb Änderungen in schnellen Animationsschleifen sparsam einsetzen.

Siehe auch

SVGFETileElement SVGFETileElement.width SVGFETileElement.x SVGFETileElement.y SVGFETileElement.in1 SVGAnimatedLength SVGLength SVGFilterElement