SVGFEComponentTransferElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEComponentTransferElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGFEComponentTransferElement spiegelt das x-Attribut des SVG-Elements <feComponentTransfer> wider. Zusammen mit y, width und height legt sie den Teilbereich des Filterprimitivs fest, also das Rechteck, auf das die Farbkomponenten-Transformation beschränkt wird.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Über baseVal kommst du an den im Markup gesetzten (bzw. per Skript änderbaren) Grundwert, über animVal an den aktuell wirksamen, eventuell durch SMIL-Animation veränderten Wert. Beide sind SVGLength-Objekte mit Eigenschaften wie value, valueInSpecifiedUnits und unitType.

Die Eigenschaft selbst ist schreibgeschützt: Du kannst element.x kein neues Objekt zuweisen. Den Wert änderst du stattdessen über element.x.baseVal.value, baseVal.newValueSpecifiedUnits() oder direkt mit setAttribute("x", …). Wie der Wert interpretiert wird, hängt vom Attribut primitiveUnits des übergeordneten <filter> ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (Grundwert, SVGLength) und animVal (animierter Wert, SVGLength, schreibgeschützt) für die x-Koordinate des Teilbereichs des Filterprimitivs. Ist kein x-Attribut gesetzt, gilt als Standard 0%, der Teilbereich deckt also den gesamten Filterbereich ab.

Beispiele

x-Koordinate eines feComponentTransfer auslesen

// Markup:
// <svg width="200" height="200">
//   <filter id="f">
//     <feComponentTransfer id="ct" x="20" y="10" width="100" height="100">
//       <feFuncR type="linear" slope="2" />
//     </feComponentTransfer>
//   </filter>
// </svg>

const ct = document.getElementById("ct");
console.log(ct.x instanceof SVGAnimatedLength);
console.log(ct.x.baseVal.value);
console.log(ct.x.animVal.value);

true 20 20

Filterbereich per Skript verschieben

const ct = document.querySelector("feComponentTransfer");

// Wert in Benutzereinheiten setzen
ct.x.baseVal.value = 50;
console.log(ct.getAttribute("x"));

// Wert mit Einheit (Prozent) setzen
ct.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(ct.getAttribute("x"));

50 25%

Einheitentyp prüfen

const ct = document.querySelector("feComponentTransfer");
ct.setAttribute("x", "10%");

const { baseVal } = ct.x;
const isPercent = baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE;
console.log(isPercent, baseVal.valueInSpecifiedUnits);

true 10

// Wichtig · Fallstricke

Schreibgeschützt: ct.x = 10 bleibt ohne Wirkung und wirft im Strict Mode einen TypeError. Ändere den Wert über ct.x.baseVal oder setAttribute.
animVal ist immer schreibgeschützt. Schreibzugriffe darauf lösen eine DOMException (NoModificationAllowedError) aus.
Bei Prozentwerten oder relativen Einheiten kann baseVal.value je nach Browser vom Viewport-Kontext abhängen. Liegt das Element nicht im gerenderten Dokument, ist das Ergebnis unter Umständen ungenau oder 0.
Die Bedeutung des Werts hängt von primitiveUnits am <filter> ab. Bei objectBoundingBox steht 0.2 für 20 % der Bounding Box.
Kompatibilität: Die Eigenschaft wird seit Langem von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Sie wird über das Mixin SVGFilterPrimitiveStandardAttributes bereitgestellt.

Siehe auch

SVGFEComponentTransferElement SVGFEComponentTransferElement.y SVGFEComponentTransferElement.width SVGFEComponentTransferElement.height SVGFEComponentTransferElement.in1 SVGAnimatedLength SVGLength