SVGFEOffsetElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEOffsetElement.x

Beschreibung

Die schreibgeschützte Eigenschaft x der Schnittstelle SVGFEOffsetElement steht für das SVG-Attribut x des Elements <feOffset>. Zusammen mit y, width und height legt es den Teilbereich des Filterprimitivs fest, also das Rechteck, auf das das Ergebnis des Primitivs beschränkt wird.

Der Wert ist ein SVGAnimatedLength-Objekt. Über baseVal kommt man an den im Attribut gesetzten Grundwert, der sich auch ändern lässt. animVal enthält den aktuellen, möglicherweise durch SMIL-Animation veränderten Wert und kann nur gelesen werden. Beide sind SVGLength-Objekte mit Eigenschaften wie value, valueInSpecifiedUnits und unitType.

Wichtig: x ist nicht der Versatz des Offset-Effekts. Um wie viel der Inhalt verschoben wird, bestimmen dx und dy (SVGFEOffsetElement.dx bzw. .dy). x gibt nur an, wo der Ausschnitt beginnt, in dem das Primitiv sein Ergebnis zeichnet. Ohne gesetztes Attribut entspricht der Standardwert 0% dem linken Rand des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt. baseVal enthält den Grundwert des Attributs x und ist veränderbar, animVal den aktuell animierten Wert (nur lesbar).

Beispiele

x-Koordinate eines feOffset-Primitivs auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
const offset = document.createElementNS(svgNS, 'feOffset');
offset.setAttribute('x', '10');
offset.setAttribute('dx', '5');
filter.appendChild(offset);

console.log(offset.x instanceof SVGAnimatedLength);
console.log(offset.x.baseVal.value);
console.log(offset.dx.baseVal); // dx ist ein SVGAnimatedNumber

true 10 5

Teilbereich per Skript verändern

// Annahme: <filter id="schatten"><feOffset id="off" dx="4" dy="4"/></filter>
const off = document.getElementById('off');

// Grundwert setzen – das Attribut wird automatisch angepasst
off.x.baseVal.value = 20;
console.log(off.getAttribute('x'));

// Mit Einheit setzen, hier Prozent
off.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(off.getAttribute('x'));

20 25%

Einheit und Standardwert prüfen

const off = document.createElementNS('http://www.w3.org/2000/svg', 'feOffset');

// Kein x-Attribut gesetzt → Standardwert 0%
const len = off.x.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueInSpecifiedUnits);

true 0

// Wichtig · Fallstricke

x ist nicht dx: Wer den Inhalt verschieben will, muss dx bzw. dy setzen. x ändert nur, wo der Ausschnitt beginnt, in dem das Ergebnis erscheint. Liegt er ungünstig, wird die Ausgabe abgeschnitten.
Die Eigenschaft selbst ist schreibgeschützt. Eine Zuweisung wie el.x = 10 hat keine Wirkung. Werte ändert man über el.x.baseVal.value oder setAttribute('x', …).
Wie x gedeutet wird, hängt von primitiveUnits am übergeordneten <filter> ab. Bei objectBoundingBox gelten Werte als Anteile des Begrenzungsrahmens, zum Beispiel 0.1.
Bei Prozentwerten braucht baseVal.value einen Darstellungskontext. Ist das Element noch nicht ins Dokument eingehängt, kann der berechnete Wert 0 sein oder beim Umrechnen einen Fehler auslösen.
SVG-Elemente immer mit createElementNS und dem SVG-Namensraum erzeugen, sonst gibt es keine x-Eigenschaft.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFEOffsetElement SVGFEOffsetElement.y SVGFEOffsetElement.width SVGFEOffsetElement.height SVGFEOffsetElement.dx SVGAnimatedLength SVGLength