SVGFEDropShadowElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDropShadowElement.y

Beschreibung

Die Eigenschaft y des Interfaces SVGFEDropShadowElement gibt das y-Attribut des Elements <feDropShadow> zurück. Damit wird die vertikale Position des Filterprimitiv-Teilbereichs (engl. „primitive subregion“) festgelegt, also des rechteckigen Bereichs, in dem der Schlagschatten berechnet und dargestellt wird.

Der Wert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Über y.baseVal (ein SVGLength) lässt sich der Grundwert aber lesen und ändern, während y.animVal den aktuell animierten Wert (z. B. durch SMIL-<animate>) zurückgibt.

Wie der Wert interpretiert wird, hängt vom Attribut primitiveUnits des umgebenden <filter> ab: Bei userSpaceOnUse (Standard) gilt er im Benutzerkoordinatensystem, bei objectBoundingBox als Bruchteil bzw. Prozentsatz der Bounding-Box des gefilterten Elements. Fehlt das Attribut, entspricht der Teilbereich standardmäßig 0% relativ zur Filterregion.

Praktisch nützlich ist y, wenn man per Skript den Bereich eines Schattens begrenzen oder erweitern möchte, etwa um abgeschnittene Schatten bei großen dy-Versätzen zu vermeiden oder Schatten nur in einem Teil des Elements zu zeigen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert).

Beispiele

y-Wert eines feDropShadow auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="schatten">
//     <feDropShadow id="ds" x="0" y="10" width="180" height="180" dx="4" dy="4" stdDeviation="3" />
//   </filter>
//   <rect x="20" y="20" width="120" height="120" fill="tomato" filter="url(#schatten)" />
// </svg>

const dropShadow = document.getElementById('ds');
console.log(dropShadow.y instanceof SVGAnimatedLength);
console.log(dropShadow.y.baseVal.value);
console.log(dropShadow.y.animVal.value);

true 10 10

Teilbereich per Skript verschieben

const dropShadow = document.querySelector('feDropShadow');

// Grundwert über baseVal ändern – aktualisiert auch das Attribut
dropShadow.y.baseVal.value = 30;
console.log(dropShadow.getAttribute('y'));

// Mit Einheit setzen, z. B. Prozent
dropShadow.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 5);
console.log(dropShadow.getAttribute('y'));

30 5%

Direkte Zuweisung schlägt fehl

'use strict';
const dropShadow = document.querySelector('feDropShadow');

try {
  dropShadow.y = 50; // Eigenschaft ist schreibgeschützt
} catch (err) {
  console.log(err instanceof TypeError);
}

// Richtig: über baseVal bzw. setAttribute
dropShadow.setAttribute('y', '50');
console.log(dropShadow.y.baseVal.value);

true 50

// Wichtig · Fallstricke

Schreibgeschützt: element.y = … wirkt nicht (im Strict Mode TypeError). Ändern Sie stattdessen y.baseVal.value oder nutzen Sie setAttribute('y', …).
Einheiten: baseVal.value liefert immer Benutzereinheiten. Bei Prozentwerten ist valueInSpecifiedUnits bzw. valueAsString aussagekräftiger; die Auflösung von Prozenten hängt von primitiveUnits ab.
Abgeschnittene Schatten: Ist der Teilbereich (y/height) oder die Filterregion zu klein, wird der Schatten bei großem dy oder stdDeviation abgeschnitten.
Kompatibilität: <feDropShadow> und damit SVGFEDropShadowElement werden in allen aktuellen Browsern unterstützt (Chrome, Edge, Firefox, Safari); ältere Browser wie der Internet Explorer kennen das Element nicht.

Siehe auch

SVGFEDropShadowElement SVGFEDropShadowElement.x SVGFEDropShadowElement.width SVGFEDropShadowElement.height SVGFEDropShadowElement.dy SVGAnimatedLength SVGLength