Hiệu ứng làm mờ SVG
SVG <feGaussianBlur>
Bộ lọc <feGaussianBlur>
được sử dụng để tạo hiệu ứng mờ:
Đây là mã SVG:
Ví dụ
<svg height="100" width="100" xmlns="https://www.w3.org/2000/svg">
<defs>
<filter
id="f1" x="0" y="0" xmlns="https://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</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 làm mờ được xác định bằng phần tử
<feGaussianBlur>
- Phần
in="SourceGraphic"
xác định hiệu ứng được tạo cho toàn bộ phần tử - Thuộc tính
stdDeviation
xác định mức độ mờ - Thuộc tính
filter
của phần tử<rect>
trỏ phần tử tới bộ lọc "f1"
SVG <feGaussianBlur>
Thuộc tính stdDeviation
xác định mức độ mờ. Giá trị cao hơn dẫn đến hình ảnh mờ hơn:
Đây là mã SVG:
Ví dụ
<svg height="100" width="100" xmlns="https://www.w3.org/2000/svg">
<defs>
<filter
id="f2" x="0" y="0" xmlns="https://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="55" />
</filter>
</defs>
<rect width="90" height="90"
fill="yellow" filter="url(#f2)" />
</svg>
Hãy tự mình thử »