SVGFilterElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFilterElement.y

Beschreibung

Die schreibgeschützte Eigenschaft y der Schnittstelle SVGFilterElement gibt das Attribut y eines <filter>-Elements als SVGAnimatedLength zurück. Der Wert legt die vertikale Position der oberen linken Ecke des Filterbereichs fest. Das ist die Fläche, auf die der Filter mit allen Filterprimitiven (z. B. <feGaussianBlur>) angewendet wird. Außerhalb dieses Bereichs schneidet der Browser das Ergebnis ab.

Wie der Wert gedeutet wird, hängt von filterUnits ab. Beim Standardwert objectBoundingBox ist y ein Bruchteil bzw. Prozentwert der Bounding-Box des gefilterten Elements. Bei userSpaceOnUse ist er eine Koordinate im Benutzerkoordinatensystem. Fehlt das Attribut, gilt -10%. So bleibt Platz für Effekte, die über das Element hinausgehen, etwa Schatten oder Weichzeichner.

Die Eigenschaft selbst kann man nicht neu zuweisen. Das enthaltene SVGLength-Objekt unter y.baseVal ist aber veränderbar. Änderungen daran schreiben sich direkt in das Attribut y zurück. y.animVal enthält den aktuell wirksamen, eventuell per SMIL animierten Wert und kann nur gelesen werden.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (veränderbares SVGLength, entspricht dem Attribut) und animVal (schreibgeschützter, aktuell animierter Wert).

Beispiele

Filterbereich auslesen

// <svg><defs><filter id="schatten" x="0" y="-20%" width="100%" height="140%">…</filter></defs></svg>
const filter = document.querySelector('#schatten');
const y = filter.y.baseVal;

console.log(y.valueAsString);
console.log(y.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(y.valueInSpecifiedUnits);

-20% true -20

Filterbereich für großen Weichzeichner nach oben erweitern

const filter = document.querySelector('#schatten');

// Mehr Platz nach oben, damit der Blur nicht abgeschnitten wird
filter.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, -50);
filter.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 200);

console.log(filter.getAttribute('y'));

-50%

Filter mit userSpaceOnUse dynamisch erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const defs = svg.querySelector('defs') ?? svg.appendChild(document.createElementNS(SVG_NS, 'defs'));

const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'blur-fix';
filter.setAttribute('filterUnits', 'userSpaceOnUse');

// Oberkante des Filterbereichs in Benutzereinheiten
filter.y.baseVal.value = 10;

const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '4');
filter.append(blur);
defs.append(filter);

console.log(filter.getAttribute('y'), filter.y.animVal.value);

10 10

// Wichtig · Fallstricke

Nicht direkt zuweisen: filter.y = 20 bewirkt nichts und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen filter.y.baseVal (value, valueAsString, newValueSpecifiedUnits()) oder rufen Sie setAttribute('y', …) auf.
Gemeint ist der Filterbereich: y gehört zum <filter>-Element als Ganzes. Die Position einzelner Primitive steht in SVGFE*Element.y, etwa bei SVGFEGaussianBlurElement.
Einheiten: Bei filterUnits=\"objectBoundingBox\" gibt baseVal.value keine Pixelposition zurück. Werten Sie dafür unitType und valueInSpecifiedUnits aus.
Abgeschnittene Effekte: Wenn Schatten oder Blur oben abgeschnitten wird, ist der Standardwert -10% oft zu klein. Erhöhen Sie dann auch height.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFilterElement SVGFilterElement.x SVGFilterElement.width SVGFilterElement.height SVGFilterElement.filterUnits SVGAnimatedLength SVGLength