SVGFEMergeElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMergeElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGFEMergeElement steht für das x-Attribut eines <feMerge>-Elements. Damit wird die horizontale Koordinate der linken oberen Ecke des Unterbereichs (filter primitive subregion) festgelegt, auf den das Ergebnis des Zusammenführens begrenzt ist.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Über baseVal kommst du an den statischen Attributwert (ein SVGLength, den du auch ändern kannst), über animVal an den aktuell animierten, schreibgeschützten Wert. Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen, das enthaltene baseVal lässt sich aber bearbeiten.

Fehlt das Attribut, gilt standardmäßig 0% des Filterbereichs. Wie der Wert zu deuten ist, hängt vom Attribut primitiveUnits des übergeordneten <filter> ab: Bei userSpaceOnUse (Standard) sind es Benutzerkoordinaten, bei objectBoundingBox Bruchteile der Begrenzungsbox des gefilterten Elements.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (bearbeitbares SVGLength) und animVal (schreibgeschützter, animierter Wert) für das x-Attribut.

Beispiele

x-Wert eines feMerge-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="schatten">
    <feMerge x="10" y="20" width="200" height="100">
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>`;
document.body.append(svg);

const merge = svg.querySelector('feMerge');
console.log(merge.x.baseVal.value);
console.log(merge.x.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

10 true

x-Position per Skript ändern

const merge = document.querySelector('feMerge');

// Neuen Wert in Benutzereinheiten setzen
merge.x.baseVal.value = 50;
console.log(merge.getAttribute('x'));

// Prozentwert setzen
merge.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(merge.getAttribute('x'));

50 25%

Standardwert ohne x-Attribut

const merge = document.createElementNS('http://www.w3.org/2000/svg', 'feMerge');
console.log(merge.hasAttribute('x'));
console.log(merge.x instanceof SVGAnimatedLength);
console.log(merge.x.baseVal.valueAsString);

false true 0%

// Wichtig · Fallstricke

merge.x = … hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändere stattdessen merge.x.baseVal oder setze das Attribut mit setAttribute('x', …).
Bei Prozent- oder relativen Einheiten kann baseVal.value eine Ausnahme werfen oder 0 liefern, solange das Element nicht im gerenderten Dokument hängt. Das Auflösen braucht einen Viewport-Kontext.
Was der Wert bedeutet, hängt von primitiveUnits am <filter> ab. Bei objectBoundingBox ist z. B. 0.1 gemeint, nicht 10.
Das Ergebnis wird zusätzlich auf den Filterbereich (x/y/width/height des <filter>) beschnitten.
Wird von allen modernen Browsern unterstützt. Ausnahmen beim Umrechnen von Einheiten können sich je nach Browser leicht unterscheiden.

Siehe auch

SVGFEMergeElement SVGFEMergeElement.y SVGFEMergeElement.width SVGFEMergeElement.height SVGFEMergeElement.result SVGAnimatedLength SVGLength SVGFEMergeNodeElement