SVGFEMorphologyElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMorphologyElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGFEMorphologyElement spiegelt das x-Attribut eines <feMorphology>-Elements wider. Sie gibt die horizontale Koordinate des Teilbereichs (primitive subregion) an, auf den das Filterprimitiv wirkt. Das Primitiv verdickt (dilate) oder verdünnt (erode) Grafiken, z. B. für Konturen oder Outline-Effekte.

Die Eigenschaft selbst ist nur lesbar: Man bekommt ein SVGAnimatedLength-Objekt, dem man keinen neuen Wert zuweisen kann. Den Wert ändert man über x.baseVal (ein SVGLength), zum Beispiel mit baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits(). x.animVal enthält den aktuellen, eventuell durch SMIL-Animation veränderten Wert.

Wie der Wert ausgelegt wird, hängt vom Attribut primitiveUnits des übergeordneten <filter> ab. Bei userSpaceOnUse (Standard) gilt er im Benutzerkoordinatensystem, bei objectBoundingBox als Anteil der Bounding-Box des gefilterten Elements. Ist das Attribut nicht gesetzt, entspricht der Teilbereich standardmäßig 0% der Filterregion.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (nur lesbarer, gerade animierter Wert).

Beispiele

x-Koordinate eines feMorphology-Primitivs auslesen

// <svg><filter id="dick"><feMorphology id="morph" x="10" operator="dilate" radius="2"/></filter></svg>
const morph = document.getElementById('morph');

console.log(morph.x instanceof SVGAnimatedLength);
console.log(morph.x.baseVal.value);
console.log(morph.x.animVal.value);

true 10 10

Wert zur Laufzeit per baseVal ändern

const morph = document.querySelector('feMorphology');

// Direkte Zuweisung an morph.x ist wirkungslos (nur lesbar)
morph.x.baseVal.value = 25;
console.log(morph.getAttribute('x'));

// Mit Einheit setzen: Prozent
morph.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 5);
console.log(morph.x.baseVal.valueAsString);

25 5%

Filter vollständig per Skript erzeugen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const filter = document.createElementNS(NS, 'filter');
filter.id = 'outline';

const morph = document.createElementNS(NS, 'feMorphology');
morph.setAttribute('operator', 'dilate');
morph.setAttribute('radius', '3');
morph.x.baseVal.valueAsString = '0';

filter.append(morph);
svg.append(filter);
svg.querySelector('text')?.setAttribute('filter', 'url(#outline)');

console.log(morph.x.baseVal.valueAsString);

// Wichtig · Fallstricke

Nur lesbar: element.x = 10 bewirkt nichts und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen x.baseVal oder rufen Sie setAttribute('x', …) auf.
animVal ist nur lesbar. Schreibversuche lösen eine NoModificationAllowedError-DOMException aus.
Prozentangaben und Einheiten wie em hängen vom Kontext ab. baseVal.value rechnet sie in Benutzereinheiten um, was ohne gerendertes SVG ungenaue Werte liefern kann. Für den ursprünglichen Wert nehmen Sie valueInSpecifiedUnits bzw. valueAsString.
Bei primitiveUnits=\"objectBoundingBox\" gilt der Wert als Anteil der Bounding-Box (z. B. 0.1).
SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst gibt es die Eigenschaft nicht.
Browser: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFEMorphologyElement SVGFEMorphologyElement.y SVGFEMorphologyElement.width SVGFEMorphologyElement.height SVGFEMorphologyElement.radiusX SVGAnimatedLength SVGLength