SVG thả bóng 2
SVG <feOffset>
Bộ lọc <feOffset> cũng được sử dụng để tạo hiệu ứng đổ bóng. Ý tưởng là lấy một đồ họa SVG và di chuyển nó một chút trong mặt phẳng xy.
<feOffset> và <feBlend>
Ví dụ đầu tiên offset một hình chữ nhật (với <feOffset> ), sau đó trộn bản gốc lên trên hình ảnh offset (với <feBlend> ):
Đây là mã SVG:
Ví dụ
<svg height="150" width="150" xmlns="https://www.w3.org/2000/svg">
<defs>
<filter id="f1" width="120" height="120">
<feOffset in="SourceGraphic" dx="20"
dy="20" />
<feBlend in="SourceGraphic" in2="offOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
idcủa phần tử<filter>xác định tên duy nhất cho bộ lọc - Hiệu ứng offset được xác định bằng phần tử
<feOffset> -
in="SourceGraphic"xác định rằng hiệu ứng được tạo cho toàn bộ phần tử - Thuộc tính
dxbiểu thị sự dịch chuyển dọc theo trục x - Thuộc tính
dybiểu thị sự dịch chuyển dọc theo trục x - Phần tử
<feBlend>kết hợp hai đồ họa với nhau bằng một chế độ hòa trộn nhất định - Thuộc tính
in2xác định hình ảnh thứ hai cho thao tác hòa trộn - Thuộc tính
filtercủa phần tử<rect>trỏ phần tử tới bộ lọc "f1"
Làm mờ hình ảnh bằng <feGaussianBlur>
Bây giờ, hình ảnh offset có thể bị mờ (với <feGaussianBlur> ):
Đây là mã SVG:
Ví dụ
<svg height="150" width="150" xmlns="https://www.w3.org/2000/svg">
<defs>
<filter id="f2" width="120" height="120">
<feOffset in="SourceGraphic" dx="20"
dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
stdDeviationcủa phần tử<feGaussianBlur>xác định mức độ mờ
Tạo bóng đen
Bây giờ, tạo bóng đen:
Đây là mã SVG:
Ví dụ
<svg height="150" width="150" xmlns="https://www.w3.org/2000/svg">
<defs>
<filter id="f3" width="120" height="120">
<feOffset in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend
in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg> Hãy tự mình thử »Giải thích mã:
- Thuộc tính
incủa phần tử<feOffset>được thay đổi thành"SourceAlpha"sử dụng kênh Alpha để làm mờ thay vì toàn bộ pixel RGBA
Coi bóng như một ma trận màu
Bây giờ, coi bóng như một ma trận màu với phần tử <feColorMatrix> :
Đây là mã SVG:
Ví dụ
<svg height="150" width="150" xmlns="https://www.w3.org/2000/svg">
<defs>
<filter id="f4" width="120" height="120">
<feOffset
in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix
type="matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feGaussianBlur stdDeviation="10" />
<feBlend
in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Phần tử
<feColorMatrix>được sử dụng để thay đổi màu sắc dựa trên ma trận chuyển đổi - Thuộc tính
typecủa phần tử<feColorMatrix>cho biết loại hoạt động của ma trận.matrixtừ khóa chỉ ra rằng ma trận giá trị 5x4 đầy đủ sẽ được xác định - Thuộc tính
valuecủa phần tử<feColorMatrix>xác định các giá trị cho loại ma trận
