SVGFEDropShadowElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDropShadowElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEDropShadowElement gibt das Attribut height des zugehörigen <feDropShadow>-Elements zurück. Es legt zusammen mit x, y und width den Teilbereich der Filterprimitive fest, also das Rechteck, auf das die Ergebnisse dieser Primitive beschnitten werden.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt mit zwei Unterobjekten: baseVal enthält den im Markup bzw. per Skript gesetzten Grundwert, animVal den aktuellen Wert inklusive laufender SMIL-Animationen. Beide sind vom Typ SVGLength und bieten u. a. value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.

Die Eigenschaft selbst ist schreibgeschützt – das Objekt kann nicht ersetzt werden. Den Wert ändert man stattdessen über height.baseVal.value, height.baseVal.newValueSpecifiedUnits() oder direkt per setAttribute("height", …). Ist kein Attribut gesetzt, gilt der Standardwert 100% (bezogen auf den Filterbereich).

Wie Prozent- bzw. Bruchwerte interpretiert werden, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab: bei userSpaceOnUse (Standard) als Benutzereinheiten, bei objectBoundingBox relativ zur Begrenzungsbox des gefilterten Elements.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (jeweils SVGLength), das die Höhe des Primitiv-Teilbereichs beschreibt.

Beispiele

Höhe eines feDropShadow auslesen

const svgNS = "http://www.w3.org/2000/svg";
const shadow = document.createElementNS(svgNS, "feDropShadow");
shadow.setAttribute("height", "150");

console.log(shadow.height instanceof SVGAnimatedLength);
console.log(shadow.height.baseVal.value);
console.log(shadow.height.baseVal.valueAsString);

true 150 150

Höhe per Skript ändern (baseVal statt Zuweisung)

// <filter id="schatten"><feDropShadow dx="4" dy="4" stdDeviation="3" height="120"/></filter>
const shadow = document.querySelector("#schatten feDropShadow");

// Falsch: shadow.height = 200; (schreibgeschützt, wird ignoriert bzw. TypeError im strict mode)
shadow.height.baseVal.value = 200;

console.log(shadow.getAttribute("height"));

200

Prozentwert setzen und Einheit prüfen

const shadow = document.createElementNS("http://www.w3.org/2000/svg", "feDropShadow");
const len = shadow.height.baseVal;

len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 130);

console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueAsString);
console.log(shadow.getAttribute("height"));

true 130% 130%

// Wichtig · Fallstricke

Schreibgeschützt: element.height = 100 ändert nichts (im strikten Modus wird ein TypeError geworfen). Nutzen Sie height.baseVal oder setAttribute().
Nicht die Schattengröße: height beschneidet nur den Ausgabebereich der Primitive. Ist er zu klein, wird der Schatten abgeschnitten. Wie weit der Schatten versetzt und weichgezeichnet wird, bestimmen dx, dy und stdDeviation.
Prozentwerte: Wird die Höhe in Prozent angegeben, liefert baseVal.value bei einem nicht gerenderten Element evtl. 0 oder wirft einen Fehler, weil der Bezugswert fehlt. Verwenden Sie dann valueInSpecifiedUnits.
animVal: Ist ebenfalls schreibgeschützt. Browser, die keine SMIL-Animationen unterstützen, liefern hier denselben Wert wie baseVal.
Kompatibilität: <feDropShadow> und SVGFEDropShadowElement werden von allen aktuellen Browsern unterstützt, der Internet Explorer unterstützt sie nicht.

Siehe auch

SVGFEDropShadowElement SVGFEDropShadowElement.width SVGFEDropShadowElement.x SVGFEDropShadowElement.y SVGAnimatedLength SVGLength SVGFEDropShadowElement.result