SVG - Bộ lọc
SVG sử dụng phần tử <filter> để xác định bộ lọc. Phần tử <filter> sử dụng một thuộc tính id để nhận dạng duy nhất nó. Các bộ lọc được xác định trong các phần tử <def> và sau đó được tham chiếu đến các phần tử đồ họa bằng id của chúng.
SVG cung cấp một bộ lọc phong phú. Sau đây là danh sách các bộ lọc thường được sử dụng.
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - bộ lọc cho bóng đổ
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
Tờ khai
Sau đây là khai báo cú pháp của <filter>thành phần. Chúng tôi chỉ hiển thị các thuộc tính chính.
<filter
filterUnits="units to define filter effect region"
primitiveUnits="units to define primitive filter subregion"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
filterRes="numbers for filter region"
xlink:href="reference to another filter" >
</filter>Thuộc tính
| Sr.No. | Tên & Mô tả |
|---|---|
| 1 | filterUnits- đơn vị để xác định vùng hiệu ứng bộ lọc. Nó chỉ định hệ tọa độ cho các giá trị độ dài khác nhau trong bộ lọc và cho các thuộc tính xác định tiểu vùng bộ lọc. Nếu filterUnits = "userSpaceOnUse", các giá trị đại diện cho các giá trị trong hệ tọa độ người dùng hiện tại tại thời điểm khi phần tử 'filter' được sử dụng. Nếu filterUnits = "objectBoundsBox", các giá trị đại diện cho các giá trị ở dạng phân số hoặc tỷ lệ phần trăm của hộp giới hạn trên phần tử tham chiếu tại vị trí khi phần tử 'filter' được sử dụng. Mặc định là userSpaceOnUse. |
| 2 | primitiveUnits- đơn vị để xác định vùng hiệu ứng bộ lọc. Nó chỉ định hệ tọa độ cho các giá trị độ dài khác nhau trong bộ lọc và cho các thuộc tính xác định tiểu vùng bộ lọc. Nếu filterUnits = "userSpaceOnUse", các giá trị đại diện cho các giá trị trong hệ tọa độ người dùng hiện tại tại thời điểm khi phần tử 'filter' được sử dụng. Nếu filterUnits = "objectBoundsBox", các giá trị đại diện cho các giá trị ở dạng phân số hoặc tỷ lệ phần trăm của hộp giới hạn trên phần tử tham chiếu tại vị trí khi phần tử 'filter' được sử dụng. Mặc định là userSpaceOnUse. |
| 3 | x- tọa độ trục x của hộp giới hạn bộ lọc. Defeault là 0. |
| 4 | y- tọa độ trục y của hộp giới hạn bộ lọc. Mặc định là 0. |
| 5 | width- chiều rộng của hộp giới hạn bộ lọc. Mặc định là 0. |
| 6 | height- chiều cao của hộp giới hạn bộ lọc. Mặc định là 0. |
| 7 | filterRes - số đại diện cho các vùng lọc. |
| số 8 | xlink:href - được sử dụng để tham chiếu đến một bộ lọc khác. |
Thí dụ
testSVG.htm<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Blur Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter1)" />
</g>
</svg>
</body>
</html>Hai phần tử <filter> được xác định là filter1 và filter2.
Hiệu ứng bộ lọc feGaussianBlur xác định hiệu ứng mờ với lượng mờ bằng cách sử dụng stdDeversion.
in = "SourceGraphic" xác định rằng hiệu ứng có thể áp dụng cho toàn bộ phần tử.
Hiệu ứng bộ lọc feOffset được sử dụng để tạo hiệu ứng đổ bóng. in = "SourceAlpha" xác định rằng hiệu ứng có thể áp dụng cho phần alpha của đồ họa RGBA.
Các phần tử <rect> đã liên kết các bộ lọc bằng thuộc tính filter.
Đầu ra
Mở textSVG.htm trong trình duyệt web Chrome. Bạn có thể sử dụng Chrome / Firefox / Opera để xem trực tiếp hình ảnh SVG mà không cần bất kỳ plugin nào. Internet Explorer 9 trở lên cũng hỗ trợ kết xuất hình ảnh SVG.
Bộ lọc với hiệu ứng Shadow
<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Shadow Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter2)" />
</g>
</svg>
</body>
</html>Đầu ra
Mở textSVG.htm trong trình duyệt web Chrome. Bạn có thể sử dụng Chrome / Firefox / Opera để xem trực tiếp hình ảnh SVG mà không cần bất kỳ plugin nào. Internet Explorer 9 trở lên cũng hỗ trợ kết xuất hình ảnh SVG.