SVGFEDropShadowElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDropShadowElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGFEDropShadowElement spiegelt das SVG-Attribut x des Elements <feDropShadow> wider. Zusammen mit y, width und height legt es den Filterprimitiv-Teilbereich (filter primitive subregion) fest, also das Rechteck, auf das das Ergebnis des Schlagschatten-Primitivs beschnitten wird.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, den Wert ändert man jedoch über x.baseVal (ein SVGLength) – etwa mit baseVal.value, baseVal.valueAsString oder newValueSpecifiedUnits(). x.animVal liefert den aktuellen Wert, auch während einer SMIL-Animation.

Wie der Wert gedeutet wird, hängt vom Attribut primitiveUnits des umgebenden <filter> ab: Bei userSpaceOnUse (Standard) gilt er im Benutzerkoordinatensystem, bei objectBoundingBox als Bruchteil bzw. Prozentsatz des Begrenzungsrahmens des gefilterten Elements. Fehlt das Attribut, gilt standardmäßig 0% des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (veränderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, ggf. animierter aktueller Wert).

Beispiele

x-Koordinate eines feDropShadow auslesen

// SVG im Dokument:
// <svg width="200" height="200">
//   <filter id="schatten">
//     <feDropShadow id="ds" x="10" y="10" width="150" height="150" dx="4" dy="4" stdDeviation="3"/>
//   </filter>
//   <rect x="30" y="30" width="100" height="100" fill="teal" filter="url(#schatten)"/>
// </svg>
const ds = document.getElementById('ds');
console.log(ds.x instanceof SVGAnimatedLength);
console.log(ds.x.baseVal.value);
console.log(ds.x.animVal.value);

true 10 10

Teilbereich per Skript verschieben

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

// Wert in Benutzereinheiten setzen
ds.x.baseVal.value = 25;
console.log(ds.getAttribute('x'));

// Wert mit Einheit setzen (Prozent)
ds.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 5);
console.log(ds.x.baseVal.valueAsString);

25 5%

Schreibversuch auf die Eigenschaft selbst

'use strict';
const ds = document.querySelector('feDropShadow');
try {
  ds.x = 50; // nur Getter vorhanden
} catch (err) {
  console.log(err instanceof TypeError);
}
// Richtig: über baseVal ändern
ds.x.baseVal.value = 50;
console.log(ds.x.baseVal.value);

true 50

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an element.x wird im nicht-strikten Modus stillschweigend ignoriert und wirft im strikten Modus einen TypeError. Ändern Sie stattdessen x.baseVal oder nutzen Sie setAttribute('x', …).
Nicht mit dx verwechseln: x beschreibt nur die Position des Beschnittbereichs, den Versatz des Schattens steuert dx/dy.
Einheiten: Ob ein Wert wie 0.1 als Benutzereinheit oder als Anteil der Bounding Box gilt, entscheidet primitiveUnits am <filter>. Prozentwerte bei baseVal.value werden in Benutzereinheiten umgerechnet, was ohne Layout-Kontext ungenau sein kann.
Kompatibilität: <feDropShadow> und SVGFEDropShadowElement werden von Chrome, Edge, Firefox und Safari unterstützt; der Internet Explorer und der alte Edge (EdgeHTML) unterstützen sie nicht. Im Zweifel mit 'SVGFEDropShadowElement' in window prüfen.

Siehe auch

SVGFEDropShadowElement SVGFEDropShadowElement.y SVGFEDropShadowElement.width SVGFEDropShadowElement.height SVGFEDropShadowElement.dx SVGAnimatedLength SVGLength