SVGFEMorphologyElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMorphologyElement.y

Beschreibung

Die Eigenschaft y des SVGFEMorphologyElement gibt das y-Attribut des Elements <feMorphology> zurück. Dieses Attribut legt die vertikale Koordinate der oberen linken Ecke des Filterprimitiv-Teilbereichs fest, also des Rechtecks, auf das die Erosion bzw. Dilatation beschränkt ist.

Der Wert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, du kannst ihr also kein neues Objekt zuweisen. Über y.baseVal (ein SVGLength) lässt sich der Grundwert aber lesen und ändern. y.animVal liefert den aktuellen, eventuell durch SMIL-Animation veränderten Wert und ist nur lesbar.

Wie der Wert zu verstehen ist, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab. Bei userSpaceOnUse (Standard) ist er eine Koordinate im Benutzerkoordinatensystem. Bei objectBoundingBox ist er ein Bruchteil bzw. Prozentwert der Begrenzungsbox des gefilterten Elements. Fehlt das Attribut, gilt standardmäßig 0% des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbares SVGLength) und animVal (schreibgeschützter, animierter Wert) für das y-Attribut.

Beispiele

y-Koordinate eines feMorphology-Primitivs auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="dick">
    <feMorphology id="morph" operator="dilate" radius="2" x="0" y="20" width="200" height="100"/>
  </filter>`;
document.body.append(svg);

const morph = svg.querySelector('#morph');
console.log(morph.y.baseVal.value);
console.log(morph.y.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

20 true

Filterbereich per Skript verschieben

const morph = document.querySelector('feMorphology');

// Grundwert über baseVal ändern – die Eigenschaft y selbst ist schreibgeschützt
morph.y.baseVal.value = 50;
console.log(morph.getAttribute('y'));

// Wert mit Einheit setzen
morph.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(morph.getAttribute('y'));

50 10%

Basis- und Animationswert vergleichen

const morph = document.querySelector('feMorphology');
const { baseVal, animVal } = morph.y;
console.log(`Basis: ${baseVal.valueAsString}, animiert: ${animVal.valueAsString}`);

Basis: 20, animiert: 20

// Wichtig · Fallstricke

morph.y = 10 hat keine Wirkung und löst im Strict Mode einen TypeError aus. Ändere stattdessen morph.y.baseVal.value oder nutze setAttribute('y', …).
animVal ist schreibgeschützt. Ein Schreibversuch löst eine NoModificationAllowedError-Ausnahme aus.
Prozentwerte in baseVal.value werden in Benutzereinheiten umgerechnet. Das funktioniert nur zuverlässig, wenn das Element im Dokument eingehängt ist. Den Originalwert erhältst du über valueInSpecifiedUnits.
Das Element muss mit createElementNS im SVG-Namensraum erzeugt werden. Sonst gibt es die Eigenschaft nicht.
Wird in allen modernen Browsern unterstützt.

Siehe auch

SVGFEMorphologyElement SVGFEMorphologyElement.x SVGFEMorphologyElement.width SVGFEMorphologyElement.height SVGFEMorphologyElement.radiusY SVGAnimatedLength SVGLength