SVGFETileElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETileElement.y

Beschreibung

Die schreibgeschützte Eigenschaft y der Schnittstelle SVGFETileElement entspricht dem Attribut y des Elements <feTile>. Zusammen mit x, width und height legt sie den Teilbereich des Filterprimitivs (filter primitive subregion) fest, also das Rechteck, in das das Ergebnis des Kachelns geschrieben wird.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Über baseVal erreicht man den im Markup gesetzten (bzw. per Skript änderbaren) Grundwert, über animVal den aktuellen, ggf. durch SMIL-Animation veränderten Wert. Beide sind SVGLength-Objekte mit Eigenschaften wie value, valueInSpecifiedUnits und unitType.

Wie die Koordinate interpretiert wird, hängt vom Attribut primitiveUnits des umgebenden <filter> ab: Bei userSpaceOnUse (Standard) ist es eine Länge im Benutzerkoordinatensystem, bei objectBoundingBox ein Bruchteil bzw. Prozentwert der Bounding-Box des gefilterten Elements. Ist y nicht gesetzt, gilt standardmäßig 0% der Filterregion.

Typischer Einsatz: Filter dynamisch per JavaScript anpassen, etwa um den gekachelten Bereich zu verschieben, oder bestehende Filterwerte auszulesen und zu debuggen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (Grundwert, änderbar) und animVal (animierter Wert, nur lesbar), jeweils vom Typ SVGLength.

Beispiele

y-Wert eines feTile-Elements auslesen

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="kachel" x="0" y="0" width="100%" height="100%">
    <feFlood flood-color="tomato" x="0" y="0" width="20" height="20" result="quad"/>
    <feTile in="quad" x="10" y="30" width="150" height="120"/>
  </filter>
  <rect width="200" height="200" filter="url(#kachel)"/>
</svg>`;
document.body.insertAdjacentHTML('beforeend', svg);

const tile = document.querySelector('feTile');
console.log(tile.y.baseVal.value);
console.log(tile.y.animVal.value);

30 30

Kachelbereich per Skript verschieben

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

// Grundwert direkt setzen (Benutzereinheiten)
tile.y.baseVal.value = 50;
console.log(tile.getAttribute('y'));

// Alternativ mit Einheit über newValueSpecifiedUnits
tile.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(tile.getAttribute('y'));

50 25%

Einheit des y-Werts prüfen

const tile = document.querySelector('feTile');
tile.setAttribute('y', '10%');

const { unitType, valueInSpecifiedUnits } = tile.y.baseVal;
const istProzent = unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE;
console.log(istProzent, valueInSpecifiedUnits);

true 10

// Wichtig · Fallstricke

Schreibgeschützt: tile.y = 20 hat keine Wirkung (im Strict Mode TypeError). Ändern immer über tile.y.baseVal.value oder setAttribute('y', …).
animVal ist nur lesbar; Schreibversuche lösen einen Fehler aus.
Bei Prozentangaben liefert baseVal.value einen umgerechneten Wert, der vom Bezugssystem abhängt – für den Rohwert valueInSpecifiedUnits verwenden.
Bei primitiveUnits="objectBoundingBox" bedeutet y="0.2" 20 % der Bounding-Box-Höhe, nicht 0,2 Pixel.
y begrenzt den Ausgabebereich von feTile; die Kachel selbst ergibt sich aus dem Teilbereich des Eingabeprimitivs (in).
Kompatibilität: Wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt; die Eigenschaft stammt aus dem gemeinsamen Mixin SVGFilterPrimitiveStandardAttributes.

Siehe auch

SVGFETileElement SVGFETileElement.x SVGFETileElement.width SVGFETileElement.height SVGFETileElement.in1 SVGAnimatedLength SVGLength