SVGFEFloodElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEFloodElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGFEFloodElement entspricht dem Attribut x des Elements <feFlood>. Sie legt die horizontale Koordinate der linken oberen Ecke des Teilbereichs fest, den das Filterprimitiv mit Farbe füllt. Zurückgegeben wird ein SVGAnimatedLength-Objekt.

Die Eigenschaft selbst ist schreibgeschützt, du kannst ihr also kein neues Objekt zuweisen. Den Wert änderst du über x.baseVal: Er ist ein veränderbares SVGLength, das z. B. value, valueInSpecifiedUnits, valueAsString und newValueSpecifiedUnits() anbietet. x.animVal enthält den aktuell wirksamen Wert, der durch SMIL-Animationen verändert sein kann.

Wie der Wert gedeutet wird, hängt vom Attribut primitiveUnits des umgebenden <filter> ab. Beim Standardwert userSpaceOnUse gilt der Wert als Koordinate im Benutzerkoordinatensystem. Bei objectBoundingBox ist er ein Bruchteil bzw. Prozentwert der Bounding-Box des gefilterten Elements. Fehlt das Attribut, ist der Teilbereich 0 % bzw. entspricht der ganzen Filterregion.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (veränderbares SVGLength, entspricht dem Attributwert) und animVal (schreibgeschütztes SVGLength mit dem aktuell animierten Wert).

Beispiele

x-Koordinate eines feFlood auslesen

// <svg><filter id="f"><feFlood id="flood" x="10" y="20" width="100" height="50" flood-color="tomato"/></filter></svg>
const flood = document.getElementById('flood');

console.log(flood.x.baseVal.value);        // Zahlenwert in Benutzereinheiten
console.log(flood.x.baseVal.valueAsString); // Originalschreibweise
console.log(flood.x.animVal.value);        // aktuell wirksamer Wert

10 10 10

Position dynamisch per Skript verschieben

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'highlight';
const flood = document.createElementNS(svgNS, 'feFlood');
flood.setAttribute('flood-color', 'gold');
filter.append(flood);
svg.append(filter);
document.body.append(svg);

// Wert über baseVal setzen – das Attribut wird automatisch aktualisiert
flood.x.baseVal.value = 25;
console.log(flood.getAttribute('x'));

25

Einheit umstellen mit newValueSpecifiedUnits()

const flood = document.querySelector('feFlood');

// x auf 10 % setzen
flood.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(flood.getAttribute('x'));
console.log(flood.x.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

10% true

// Wichtig · Fallstricke

Schreibgeschützt: flood.x = 5 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändere den Wert über flood.x.baseVal oder setAttribute('x', …).
animVal ist schreibgeschützt. Wer versucht, darauf zu schreiben, bekommt eine NoModificationAllowedError-DOMException.
Bei Prozentwerten oder relativen Einheiten liefert baseVal.value einen umgerechneten Wert. Je nach Kontext (z. B. wenn das Element nicht gerendert wird) kann das Ergebnis vom Erwarteten abweichen. valueInSpecifiedUnits gibt den Wert in der angegebenen Einheit zurück.
Die Bedeutung des Werts hängt von primitiveUnits am <filter> ab. Bei objectBoundingBox steht z. B. 0.1 für 10 % der Bounding-Box.
SVG-Elemente musst du mit document.createElementNS() und dem SVG-Namensraum erzeugen, sonst gibt es die Eigenschaft x nicht.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFEFloodElement SVGFEFloodElement.y SVGFEFloodElement.width SVGFEFloodElement.height SVGAnimatedLength SVGLength SVGAElement.origin