SVGFEMergeElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMergeElement.y

Beschreibung

Die Eigenschaft y der Schnittstelle SVGFEMergeElement entspricht dem SVG-Attribut y eines <feMerge>-Elements. Sie legt die obere Kante des Teilbereichs des Filterprimitivs fest, also den Bereich, in dem das Ergebnis der Zusammenführung (Merge) berechnet und ausgegeben wird.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Über baseVal liest oder ändert man den im Markup gesetzten Grundwert, über animVal den aktuellen, ggf. durch SMIL-Animation veränderten Wert. Die Eigenschaft selbst ist schreibgeschützt – man ersetzt nicht das Objekt, sondern ändert dessen baseVal.

Wie y interpretiert wird, hängt vom Attribut primitiveUnits des umschließenden <filter> ab: Bei userSpaceOnUse (Standard) handelt es sich um Benutzerkoordinaten, bei objectBoundingBox um einen Bruchteil bzw. Prozentsatz des Begrenzungsrahmens des gefilterten Elements. Ist das Attribut nicht gesetzt, gilt als Standard 0% des Filterbereichs.

Typische Einsatzfälle sind das dynamische Beschneiden oder Verschieben des Ausgabebereichs zusammengeführter Effekte (z. B. Schatten und Glanz), etwa für Animationen per JavaScript.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbare SVGLength) und animVal (schreibgeschützter, animierter Wert) für die vertikale Position des Filterprimitiv-Teilbereichs.

Beispiele

y-Wert eines feMerge auslesen

// <svg><filter id="f"><feMerge id="merge" y="10"><feMergeNode in="SourceGraphic"/></feMerge></filter></svg>
const merge = document.getElementById('merge');
console.log(merge.y.baseVal.value);
console.log(merge.y.animVal.value);

10 10

y dynamisch per baseVal ändern

const merge = document.querySelector('feMerge');
// Neuen Wert in Benutzerkoordinaten setzen
merge.y.baseVal.value = 25;
console.log(merge.getAttribute('y'));

25

Prozentwert mit newValueSpecifiedUnits setzen

const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
const merge = document.createElementNS(svgNS, 'feMerge');
filter.append(merge);

merge.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 20);
console.log(merge.getAttribute('y'));
console.log(merge.y.baseVal.valueAsString);

20% 20%

// Wichtig · Fallstricke

merge.y = 10 hat keine Wirkung (bzw. wirft im Strict Mode einen TypeError) – immer merge.y.baseVal verwenden.
Bei Prozentangaben liefert baseVal.value einen umgerechneten Wert in Benutzereinheiten, der vom Kontext abhängt; für den Originalwert valueInSpecifiedUnits bzw. valueAsString nutzen.
Die Interpretation hängt von primitiveUnits des <filter> ab; bei objectBoundingBox sind Werte wie 0.1 üblich.
animVal ist schreibgeschützt; SMIL-Animationen werden in allen modernen Browsern unterstützt, die Eigenschaft selbst ist seit langem überall verfügbar.

Siehe auch

SVGFEMergeElement SVGFEMergeElement.x SVGFEMergeElement.width SVGFEMergeElement.height SVGAnimatedLength SVGFEMergeNodeElement HTMLTextAreaElement.type