SVGFEDropShadowElement: dy property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính chỉ đọc dy của giao diện SVGFEDropShadowElement phản ánh thuộc tính dy của phần tử <feDropShadow> đã cho.
Giá trị
Một đối tượng SVGAnimatedNumber.
Ví dụ
Truy cập giá trị dy
Trong ví dụ này, chúng ta lấy độ dịch chuyển dọc của <feDropShadow> bằng cách sử dụng thuộc tính chỉ đọc dx của giao diện SVGFEDropShadowElement.
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
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # dom-svgfedropshadowelement-dy |