SVGFEGaussianBlurElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEGaussianBlurElement.y

Beschreibung

Die Eigenschaft y gehört zur Schnittstelle SVGFEGaussianBlurElement und entspricht dem Attribut y des Elements <feGaussianBlur>. Zusammen mit x, width und height legt sie den Filterprimitiv-Teilbereich fest. Das ist das Rechteck, in dem der Weichzeichner berechnet und ausgegeben wird.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, ihr Wert lässt sich aber ändern. Über y.baseVal erhältst du ein beschreibbares SVGLength mit dem Grundwert aus dem Attribut. y.animVal enthält den aktuellen, eventuell durch SMIL-Animation veränderten Wert und kann nur gelesen werden.

Wie der Wert zu deuten ist, hängt vom Attribut primitiveUnits des umgebenden <filter> ab. Bei userSpaceOnUse (Standard) ist er eine Länge im Benutzerkoordinatensystem. Bei objectBoundingBox ist er ein Bruchteil bzw. Prozentsatz des Begrenzungsrahmens des gefilterten Elements. Fehlt das Attribut, beginnt der Teilbereich oben am Filterbereich; baseVal.value liefert dann typischerweise 0, als Standard wirkt aber in Wirklichkeit 0% des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (SVGLength, beschreibbar) und animVal (SVGLength, nur lesbar) für die vertikale Position des Filterprimitiv-Teilbereichs.

Beispiele

y-Koordinate eines Weichzeichners auslesen

// HTML: <svg><filter id="blur"><feGaussianBlur id="gb" y="20" stdDeviation="4"/></filter></svg>
const blur = document.getElementById('gb');

console.log(blur.y instanceof SVGAnimatedLength);
console.log(blur.y.baseVal.value);
console.log(blur.y.animVal.value);

true 20 20

Teilbereich dynamisch verschieben

const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'weich';
const gb = document.createElementNS(svgNS, 'feGaussianBlur');
gb.setAttribute('stdDeviation', '3');
filter.append(gb);
document.querySelector('svg').append(filter);

// Weichzeichner erst ab y = 50 Benutzereinheiten anwenden
gb.y.baseVal.value = 50;
console.log(gb.getAttribute('y'));

50

Wert mit Einheit setzen und auslesen

const gb = document.querySelector('feGaussianBlur');

// Prozentangabe relativ zum Filterbereich/Viewport
gb.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);

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

25% true

// Wichtig · Fallstricke

Einer Eigenschaft ohne Setter kannst du nichts zuweisen: gb.y = 10 bleibt wirkungslos und löst im Strict Mode einen TypeError aus. Ändere stattdessen gb.y.baseVal.value oder setze das Attribut mit setAttribute('y', …).
animVal ist nur lesbar. Wer dort schreibt, bekommt eine NoModificationAllowedError-Ausnahme.
Ist primitiveUnits="objectBoundingBox" gesetzt, gilt ein Wert wie 0.2 als 20 % des Begrenzungsrahmens und nicht als 0,2 Pixel.
Wird der Teilbereich zu klein gewählt, schneidet er den Weichzeichner sichtbar ab. Achte darauf, dass y und height genug Platz für den Weichzeichnungsradius lassen (etwa das Dreifache von stdDeviation).
Die Eigenschaft wird in allen modernen Browsern unterstützt.

Siehe auch

SVGFEGaussianBlurElement SVGFEGaussianBlurElement.x SVGFEGaussianBlurElement.width SVGFEGaussianBlurElement.height SVGFEGaussianBlurElement.stdDeviationY SVGAnimatedLength SVGLength