<feDropShadow>
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.
Phần tử primitive lọc <feDropShadow> của SVG tạo một bóng đổ của ảnh đầu vào. Nó chỉ có thể được dùng bên trong phần tử <filter>.
Note:
Màu và độ mờ của bóng đổ có thể được thay đổi bằng các thuộc tính trình bày flood-color và flood-opacity.
Giống như các primitive lọc khác, nó xử lý các thành phần màu trong color space linearRGB theo mặc định. Bạn có thể dùng color-interpolation-filters để thay bằng sRGB.
Ngữ cảnh sử dụng
Thuộc tính
dx: Thuộc tính này định nghĩa độ lệch x của bóng đổ. Kiểu giá trị: <number>; Giá trị mặc định:2; Có thể hoạt ảnh: códy: Thuộc tính này định nghĩa độ lệch y của bóng đổ. Kiểu giá trị: <number>; Giá trị mặc định:2; Có thể hoạt ảnh: cóinstdDeviation: Thuộc tính này định nghĩa độ lệch chuẩn cho thao tác làm mờ trong bóng đổ. Kiểu giá trị: <number-optional-number>; Giá trị mặc định:2; Có thể hoạt ảnh: có- Thuộc tính primitive lọc:
x,y,width,height,result
Giao diện DOM
Phần tử này triển khai giao diện SVGFEDropShadowElement.
Ví dụ
html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />
</filter>
<filter id="shadow3">
<feDropShadow
dx="-0.8"
dy="-0.8"
stdDeviation="0"
flood-color="pink"
flood-opacity="0.5" />
</filter>
</defs>
<circle cx="5" cy="50%" r="4" fill="pink" filter="url(#shadow)" />
<circle cx="15" cy="50%" r="4" fill="pink" filter="url(#shadow2)" />
<circle cx="25" cy="50%" r="4" fill="pink" filter="url(#shadow3)" />
</svg>
Đặc tả
| Specification |
|---|
| Filter Effects Module Level 1 # feDropShadowElement |
Tương thích trình duyệt
Xem thêm
- Thuộc tính primitive lọc SVG bao gồm
height,in,result,x,y, vàwidth. - Thuộc tính trình bày SVG, bao gồm
flood-color, vàflood-opacity.