SVGFETileElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETileElement.x

Beschreibung

Die schreibgeschützte Eigenschaft x des Interfaces SVGFETileElement steht für das Attribut x eines <feTile>-Elements. Zusammen mit y, width und height legt sie den Teilbereich des Filterprimitivs fest, also das Rechteck, in das <feTile> sein Eingabebild kachelartig wiederholt.

Du bekommst keine Zahl zurück, sondern ein SVGAnimatedLength-Objekt mit zwei Eigenschaften:

baseVal ist der statische Wert aus dem Attribut. Du kannst ihn lesen und ändern.
animVal ist der aktuelle Wert, auch während einer SMIL-Animation. Er ist nur lesbar.

Beide sind SVGLength-Objekte. Über value bekommst du den Wert in Benutzereinheiten, über valueInSpecifiedUnits den Wert in der angegebenen Einheit, über unitType die Einheit selbst.

Die Eigenschaft ist nützlich, wenn du einen Kachelfilter per Skript verändern willst, etwa um einen Kachelausschnitt zu verschieben oder den Filterbereich an die Größe eines Elements anzupassen. Ist das Attribut nicht gesetzt, gilt als Standard 0% des Filterbereichs. Die Prozentangabe bezieht sich auf den Filterbereich, wenn primitiveUnits="userSpaceOnUse" gilt.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (statischer Attributwert, veränderbar) und animVal (aktueller, eventuell animierter Wert, nur lesbar). Beide sind vom Typ SVGLength.

Beispiele

x-Wert eines feTile-Elements auslesen

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

console.log(tile.x instanceof SVGAnimatedLength); // true
console.log(tile.x.baseVal.value);                // 20
console.log(tile.x.animVal.value);                // 20

true 20 20

Kachelbereich per Skript verschieben

// HTML:
// <svg width="300" height="200">
//   <filter id="kachel" filterUnits="userSpaceOnUse" x="0" y="0" width="300" height="200">
//     <feFlood flood-color="teal" x="0" y="0" width="50" height="50" result="quelle"/>
//     <feOffset in="quelle" dx="10" dy="10" result="versatz"/>
//     <feTile in="versatz" id="tile" x="0" y="0" width="300" height="200"/>
//   </filter>
//   <rect width="300" height="200" filter="url(#kachel)"/>
// </svg>

const tile = document.getElementById('tile');

// Kachelbereich um 40 Benutzereinheiten nach rechts schieben
tile.x.baseVal.value = 40;
console.log(tile.getAttribute('x')); // "40"

"40"

Einheit auswerten und neu setzen

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

const len = tile.x.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE); // true
console.log(len.valueInSpecifiedUnits);                              // 10

// Auf 15 Pixel umstellen
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, 15);
console.log(tile.getAttribute('x')); // "15px"

true 10 "15px"

// Wichtig · Fallstricke

Nur lesbar: Du kannst tile.x = 10 nicht zuweisen. Setze stattdessen tile.x.baseVal.value oder verwende setAttribute('x', …).
animVal ist nur lesbar. Wenn du es änderst, wird ein Fehler (NoModificationAllowedError) ausgelöst.
Prozentwerte: baseVal.value in Benutzereinheiten umzurechnen, geht bei Prozentangaben nur, wenn das Element im Dokument hängt. Sonst kann ein unerwartetes Ergebnis wie 0 herauskommen.
Bezugssystem: Wie x gedeutet wird, hängt von primitiveUnits am <filter> ab. Bei objectBoundingBox sind Werte wie 0.1 Anteile der Bounding Box.
Namensraum: Erzeuge Elemente mit document.createElementNS('http://www.w3.org/2000/svg', 'feTile'). Mit createElement entsteht kein SVGFETileElement, und x ist dann undefined.
Kompatibilität: Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFETileElement SVGFETileElement.y SVGFETileElement.width SVGFETileElement.height SVGFETileElement.in1 SVGAnimatedLength SVGLength