SVGFEDropShadowElement: dx 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 dx của giao diện SVGFEDropShadowElement phản ánh thuộc tính dx của phần tử <feDropShadow> đã cho.
Giá trị
Một đối tượng SVGAnimatedNumber.
Ví dụ
Truy cập giá trị dx
Trong ví dụ này, chúng ta lấy độ dịch chuyển ngang 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 dx 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.dx.baseVal); // Output: 10
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # dom-svgfedropshadowelement-dx |