Giới thiệu bộ lọc SVG
Bộ lọc SVG
Bộ lọc SVG được sử dụng để thêm các hiệu ứng đặc biệt vào đồ họa SVG.
Tất cả các bộ lọc SVG được xác định trong phần tử <defs>
. Phần tử <defs>
là viết tắt của "định nghĩa" và chứa định nghĩa về các phần tử đặc biệt (chẳng hạn như bộ lọc).
Phần tử <filter>
được sử dụng để xác định bộ lọc SVG. Phần tử <filter>
có thuộc tính id
bắt buộc để xác định bộ lọc. Đồ họa/hình ảnh sau đó trỏ đến bộ lọc để sử dụng.
Sau đó, bên trong phần tử <filter>
, chúng tôi đặt một hoặc nhiều hiệu ứng bộ lọc để sử dụng trên đồ họa (xem bảng bên dưới để biết danh sách các thành phần hiệu ứng bộ lọc).
Ví dụ nhanh
Ở đây chúng tôi sử dụng bộ lọc <feGaussianBlur>
để làm mờ đồ họa SVG:
Đâ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">
<feGaussianBlur in="SourceGraphic"
stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>
Hãy tự mình thử » Các phần tử hiệu ứng bộ lọc SVG
Các bộ lọc có sẵn trong SVG là:
Name | Description |
---|---|
<feBlend> | Combines two graphics together by a certain blending mode |
<feColorMatrix> | Changes colors based on a transformation matrix |
<feComponentTransfer> | Performs component-wise remapping of data for each pixel. Can adjust brightness, contrast, color balance, etc |
<feComposite> | Performs combination of two input images pixel-wise in image space using a compositing operation |
<feConvolveMatrix> | Applies a matrix convolution filter effect (this includes blurring, edge detection, sharpening, embossing and beveling) |
<feDiffuseLighting> | Lights a graphic by using the alpha channel as a bump map |
<feDisplacementMap> | Uses pixels values from the graphic from in2 attribute to displace the image from the in attribute |
<feDistantLight> | Specifies a distant light source to be used inside a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting> |
<feDropShadow> | Creates a drop shadow of the graphic |
<feFlood> | Fills the filter subregion with the color and opacity defined by flood-color and flood-opacity attributes |
<feGaussianBlur> | Blurs the graphic |
<feImage> | Gets graphic data from an external source and provides the pixel data as output |
<feMerge> | Blends input graphic layers (applies filter effects concurrently instead of sequentially) |
<feMergeNode> | Takes the result of another filter to be processed by its parent <feMerge> |
<feMorphology> | Erodes or dilates the graphic (for fattening or thinning effects) |
<feOffset> | Offsets the input graphic |
<fePointLight> | Specifies a light source that allows creating a point light effect |
<feSpecularLighting> | Lights a source graphic by using the alpha channel as a bump map |
<feSpotLight> | Specifies a light source that allows creating a spotlight effect |
<feTile> | Fills a target rectangle with a repeated pattern of an input graphic |
<feTurbulence> | Creates a graphic with the Perlin turbulence function |
Mẹo: Bạn có thể sử dụng nhiều hiệu ứng bộ lọc trên mỗi phần tử SVG!
Trong các chương tiếp theo, chúng tôi sẽ chỉ trình bày một số hiệu ứng bộ lọc có thể thực hiện được - và cho bạn ý tưởng về những gì có thể thực hiện được với SVG!