<feDisplacementMap>
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.
Phần tử primitive lọc <feDisplacementMap> của SVG sử dụng các giá trị pixel từ ảnh ở in2 để dịch chuyển không gian ảnh ở in.
Công thức cho phép biến đổi trông như sau:
P'(x,y) ← P(x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
trong đó P(x,y) là ảnh đầu vào, in, và P'(x,y) là ảnh đích. XC(x,y) và YC(x,y) là các giá trị thành phần của kênh được chỉ định bởi xChannelSelector và yChannelSelector.
Giống như các primitive lọc khác, nó xử lý các thành phần màu trong color space linearRGB theo mặc định. Bạn có thể dùng color-interpolation-filters để thay bằng sRGB.
Ngữ cảnh sử dụng
Thuộc tính
Giao diện DOM
Phần tử này triển khai giao diện SVGFEDisplacementMapElement.
Ví dụ
<svg
width="200"
height="200"
viewBox="0 0 220 220"
xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence
type="turbulence"
baseFrequency="0.05"
numOctaves="2"
result="turbulence" />
<feDisplacementMap
in2="turbulence"
in="SourceGraphic"
scale="50"
xChannelSelector="R"
yChannelSelector="G" />
</filter>
<circle cx="100" cy="100" r="100" filter="url(#displacementFilter)" />
</svg>
Đặc tả
| Specification |
|---|
| Filter Effects Module Level 1 # feDisplacementMapElement |
Tương thích trình duyệt
Xem thêm
- Thuộc tính primitive lọc SVG
<filter><animate><set><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feFlood><feGaussianBlur><feImage><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence>- SVG tutorial: Filter effects