SVG thả bóng 1
SVG <feDropShadow>
Bộ lọc <feDropShadow>
được sử dụng để tạo hiệu ứng đổ bóng trên đồ họa đầu vào:
Đây là mã SVG:
Ví dụ
<svg height="110" width="110" xmlns="https://www.w3.org/2000/svg">
<defs>
<filter id="f1">
<feDropShadow dx="12" dy="14"
stdDeviation="1" flood-opacity="0.7"/>
</filter>
</defs>
<rect width="90" height="90" fill="yellow" filter="url(#f1)"
/>
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
id
của phần tử<filter>
xác định tên duy nhất cho bộ lọc - Hiệu ứng đổ bóng được xác định bằng phần tử
<feDropShadow>
- Thuộc tính
dx
xác định độ lệch x của bóng đổ - Thuộc tính
dy
xác định độ lệch y của bóng đổ - Thuộc tính
stdDeviation
xác định mức độ mờ trong bóng đổ - Thuộc tính
flood-opacity
xác định độ mờ của bóng đổ (từ 0 đến 1) - Thuộc tính
filter
của phần tử<rect>
trỏ phần tử tới bộ lọc "f1"