SVGFECompositeElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGFECompositeElement gibt das Attribut x des zugehörigen <feComposite>-Elements als SVGAnimatedLength-Objekt zurück. Zusammen mit y, width und height legt sie den Filter-Primitiv-Teilbereich fest, also das Rechteck, auf das sich das Ergebnis des Compositing-Schritts beschränkt.

Die Eigenschaft selbst ist schreibgeschützt: Das Objekt kann nicht ersetzt werden. Den Wert kann man aber über x.baseVal ändern, z. B. mit baseVal.value, baseVal.valueAsString oder newValueSpecifiedUnits(). x.animVal liefert den aktuellen Wert, einschließlich laufender SMIL-Animationen, und ist nur lesbar.

Wie der Wert ausgelegt wird, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab. Bei userSpaceOnUse (Standard) gilt der Wert im Benutzerkoordinatensystem, bei objectBoundingBox als Anteil des Begrenzungsrahmens des gefilterten Elements. Ohne gesetztes Attribut gilt der Standardwert 0% relativ zum Filterbereich. Das Primitiv deckt dann den gesamten Filterbereich ab.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbare SVGLength) und animVal (nur lesbare, aktuell animierte SVGLength) für das Attribut x.

Beispiele

x-Koordinate eines feComposite auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="f">
    <feFlood flood-color="tomato" result="flut"/>
    <feComposite id="comp" in="flut" in2="SourceGraphic" operator="in" x="10" y="20" width="100" height="50"/>
  </filter>`;
document.body.append(svg);

const comp = svg.querySelector('#comp');
console.log(comp.x instanceof SVGAnimatedLength);
console.log(comp.x.baseVal.value);
console.log(comp.x.animVal.value);

true 10 10

x-Wert per baseVal ändern

const comp = document.querySelector('feComposite');

// Wert in Benutzereinheiten setzen
comp.x.baseVal.value = 40;
console.log(comp.getAttribute('x'));

// Prozentwert über die Einheiten-API setzen
comp.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(comp.getAttribute('x'));
console.log(comp.x.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

40 25% true

Teilbereich interaktiv verschieben

const comp = document.querySelector('#comp');
const slider = document.querySelector('#xRegler'); // <input type="range">

slider.addEventListener('input', () => {
  // Linke Kante des Filter-Teilbereichs verschieben
  comp.x.baseVal.valueAsString = `${slider.value}px`;
});

// Wichtig · Fallstricke

Nicht direkt zuweisen: comp.x = 10 bewirkt nichts und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen comp.x.baseVal.value oder verwenden Sie setAttribute('x', …).
animVal ist schreibgeschützt. Ein Schreibversuch löst eine NoModificationAllowedError-DOMException aus.
Bei relativen Einheiten (%, em) kann baseVal.value einen umgerechneten Wert oder 0 liefern, wenn der Bezugskontext fehlt, z. B. wenn das Element noch nicht im Dokument ist. Für den Originalwert nehmen Sie valueAsString oder valueInSpecifiedUnits.
Wie der Wert ausgelegt wird, hängt von primitiveUnits am <filter> ab. Bei objectBoundingBox bedeutet 0.1 „10 % der Breite des Begrenzungsrahmens“.
SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden. Sonst gibt es keine x-Eigenschaft.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFECompositeElement SVGFECompositeElement.y SVGFECompositeElement.width SVGFECompositeElement.height SVGAnimatedLength SVGLength SpeechSynthesisUtterance.text