SVGFEBlendElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEBlendElement.y

Beschreibung

Die Eigenschaft y der Schnittstelle SVGFEBlendElement entspricht dem y-Attribut eines <feBlend>-Elements. Sie gibt die vertikale Koordinate der oberen linken Ecke des Teilbereichs an, auf den das Filterprimitiv angewendet wird (Filterprimitiv-Teilbereich, engl. filter primitive subregion).

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, du kannst ihr also kein neues Objekt zuweisen. Den Wert änderst du aber über y.baseVal (ein SVGLength), etwa mit baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits(). y.animVal enthält den aktuellen Wert, der sich während einer SMIL-Animation ergibt.

Ist kein y-Attribut gesetzt, gilt als Standard 0% des Filterbereichs. Wie der Wert gedeutet wird, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab: Bei userSpaceOnUse (Standard) sind es Benutzerkoordinaten, bei objectBoundingBox Anteile am Begrenzungsrahmen des gefilterten Elements.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbarer Basiswert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert).

Beispiele

y-Koordinate eines feBlend-Elements auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="blend">
//     <feBlend id="fe" in="SourceGraphic" in2="BackgroundImage" mode="multiply" y="20" />
//   </filter>
//   <rect width="100" height="100" fill="tomato" filter="url(#blend)" />
// </svg>

const fe = document.getElementById('fe');
console.log(fe.y instanceof SVGAnimatedLength);
console.log(fe.y.baseVal.value);
console.log(fe.y.baseVal.valueAsString);

true 20 20

y-Wert per Skript ändern

const fe = document.querySelector('feBlend');

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

// Auf Prozent umstellen
fe.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(fe.getAttribute('y'));

40 10%

feBlend dynamisch erzeugen und positionieren

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

const blend = document.createElementNS(svgNS, 'feBlend');
blend.setAttribute('in', 'SourceGraphic');
blend.setAttribute('mode', 'screen');
blend.y.baseVal.valueAsString = '15%';

filter.append(blend);
document.querySelector('svg').append(filter);

console.log(blend.y.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

true

// Wichtig · Fallstricke

Schreibgeschützt: fe.y = 10 hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändere den Wert stattdessen über fe.y.baseVal oder setAttribute('y', …).
animVal ist nur lesbar. In Browsern ohne laufende SMIL-Animation entspricht er meist baseVal.
Das Element muss im SVG-Namensraum erzeugt werden (createElementNS). Mit document.createElement('feBlend') entsteht ein unbekanntes HTML-Element ohne die Eigenschaft y.
Relative Einheiten wie % kann baseVal.value erst sinnvoll in Benutzereinheiten umrechnen, wenn das Element im gerenderten Dokument hängt. Sonst kann ein Fehler auftreten oder ein unerwarteter Wert herauskommen.
Die Eingabe BackgroundImage wird von modernen Browsern kaum unterstützt. Die Eigenschaft y selbst gibt es in allen aktuellen Browsern.

Siehe auch

SVGFEBlendElement SVGFEBlendElement.x SVGFEBlendElement.width SVGFEBlendElement.height SVGAnimatedLength SVGLength HTMLTableRowElement.ch