SVGFECompositeElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFECompositeElement.y

Beschreibung

Die Eigenschaft y des SVGFECompositeElement gibt das Attribut y eines <feComposite>-Elements wieder. Sie legt die obere Kante des Bereichs fest, in dem dieses Filter-Primitiv wirkt. Außerhalb davon wird sein Ergebnis abgeschnitten. Zusammen mit x, width und height bildet sie den sogenannten Filter-Primitive-Subregion.

Der Rückgabewert ist ein SVGAnimatedLength. Über baseVal liest und schreibst du den im Attribut gesetzten Grundwert (ein SVGLength). animVal enthält den aktuellen, gegebenenfalls durch SMIL-Animation veränderten Wert und lässt sich nur lesen. Schreibgeschützt ist lediglich die Eigenschaft y selbst: Du kannst ihr kein neues Objekt zuweisen, ihren Inhalt über baseVal aber ändern.

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

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert als SVGLength, änderbar) und animVal (aktueller animierter Wert, nur lesbar) für das Attribut y.

Beispiele

y-Wert eines feComposite auslesen

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

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

true 20 20

Grundwert per Skript ändern

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

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

// Wert in Prozent über newValueSpecifiedUnits setzen
comp.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(comp.getAttribute('y'));

40 25%

Filterbereich schrittweise nach unten verschieben

const comp = document.querySelector('#f1 feComposite');
let offset = 0;

const tick = () => {
  offset = (offset + 1) % 100;
  comp.y.baseVal.value = offset;
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

Zuweisung an y selbst hat keine Wirkung

'use strict';
const comp = document.querySelector('feComposite');
try {
  comp.y = 10; // y ist ein reiner Getter
} catch (err) {
  console.log(err instanceof TypeError);
}

true

// Wichtig · Fallstricke

Schreibgeschützt: comp.y = 10 wird ohne Strict Mode stillschweigend ignoriert und löst im Strict Mode einen TypeError aus. Werte änderst du über y.baseVal.value oder mit setAttribute('y', …).
animVal lässt sich nur lesen. Ein Schreibversuch wirft eine NoModificationAllowedError-DOMException.
Prozentwerte beziehen sich auf den Filterbereich des <filter>-Elements. Wenn du sie mit baseVal.value ausliest, erhältst du einen in Benutzereinheiten umgerechneten Wert. Den Originalwert liefert valueInSpecifiedUnits.
Bei primitiveUnits="objectBoundingBox" ist y="0.2" ein Bruchteil des Begrenzungsrahmens und kein Pixelwert. Das wird leicht verwechselt.
SVG-Elemente musst du mit document.createElementNS('http://www.w3.org/2000/svg', …) erzeugen. Mit createElement entsteht kein SVGFECompositeElement, und y ist dann undefined.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) seit Langem unterstützt.

Siehe auch

SVGFECompositeElement SVGFECompositeElement.x SVGFECompositeElement.width SVGFECompositeElement.height SVGFECompositeElement.operator SVGAnimatedLength SVGLength