SVGFEDropShadowElement: dy-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Die dy schreibgeschützte Eigenschaft der Schnittstelle SVGFEDropShadowElement spiegelt das dy Attribut des gegebenen <feDropShadow> Elements wider.
Wert
Ein SVGAnimatedNumber Objekt.
Beispiele
Zugriff auf den dy-Wert
In diesem Beispiel rufen wir die vertikale Verschiebung des <feDropShadow>-Elements ab, indem wir die schreibgeschützte Eigenschaft dy der SVGFEDropShadowElement Schnittstelle verwenden.
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="drop-shadow-filter">
<!-- Drop Shadow with dy property set to 10 -->
<feDropShadow
in="SourceGraphic"
dx="10"
dy="10"
stdDeviation="5"
flood-color="red" />
</filter>
</defs>
<!-- Rectangle with a red shadow -->
<rect
x="20"
y="20"
width="100"
height="100"
fill="red"
filter="url(#drop-shadow-filter)" />
<!-- Circle with a red shadow -->
<circle
cx="100"
cy="100"
r="50"
fill="blue"
filter="url(#drop-shadow-filter)" />
</svg>
js
const dropShadow = document.querySelector("feDropShadow");
console.log(dropShadow.dy.baseVal); // Output: 10
Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # dom-svgfedropshadowelement-dy |
Browser-Kompatibilität
Loading…