<feImage>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
<feImage> primitive bộ lọc SVG lấy dữ liệu hình ảnh từ một nguồn bên ngoài và cung cấp dữ liệu pixel làm đầu ra (nghĩa là nếu nguồn bên ngoài là một ảnh SVG, nó sẽ được raster hóa.)
Ngữ cảnh sử dụng
| Categories | Filter primitive element |
|---|---|
| Permitted content | Any number of the following elements, in any order:<animate>, <animateTransform>, <set> |
Thuộc tính
crossoriginfetchpriorityExperimentalpreserveAspectRatiohrefxlink:hrefDeprecated- Thuộc tính primitive bộ lọc:
x,y,width,height,result
Giao diện DOM
Phần tử này triển khai giao diện SVGFEImageElement.
Ví dụ
>SVG
html
<svg
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200"
height="200">
<defs>
<filter id="image">
<feImage href="mdn_logo_only_color.png" />
</filter>
</defs>
<rect x="10%" y="10%" width="80%" height="80%" filter="url(#image)" />
</svg>
Kết quả
Đặc tả
| Specification |
|---|
| Filter Effects Module Level 1> # feImageElement> |
Tương thích trình duyệt
Xem thêm
- SVG Filter primitive attributes
- thuộc tính
flood-color - thuộc tính
flood-opacity <filter><animate><animateTransform><set><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence>- thuộc tính
fetchpriority - Hướng dẫn SVG: Hiệu ứng bộ lọc