xChannelSelector
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính xChannelSelector cho biết kênh màu nào từ in2 sẽ được dùng để làm lệch các điểm ảnh trong in theo trục x.
Phần tử
Bạn có thể dùng thuộc tính này với phần tử SVG <feDisplacementMap>.
Lưu ý sử dụng
| Giá trị | R | G | B | A |
|---|---|
| Giá trị mặc định | A |
| Có thể hoạt ảnh | Có |
R-
Từ khóa này chỉ định rằng kênh màu đỏ của ảnh đầu vào được xác định trong
in2sẽ được dùng để làm lệch các điểm ảnh của ảnh đầu vào được xác định trongintheo trục x. G-
Từ khóa này chỉ định rằng kênh màu xanh lá của ảnh đầu vào được xác định trong
in2sẽ được dùng để làm lệch các điểm ảnh của ảnh đầu vào được xác định trongintheo trục x. B-
Từ khóa này chỉ định rằng kênh màu xanh dương của ảnh đầu vào được xác định trong
in2sẽ được dùng để làm lệch các điểm ảnh của ảnh đầu vào được xác định trongintheo trục x. A-
Từ khóa này chỉ định rằng kênh alpha của ảnh đầu vào được xác định trong
in2sẽ được dùng để làm lệch các điểm ảnh của ảnh đầu vào được xác định trongintheo trục x.
Ví dụ
<svg viewBox="0 0 440 160" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feImage
href="mdn.svg"
x="0"
y="0"
width="100%"
height="100%"
result="abc" />
<feDisplacementMap
in2="abc"
in="SourceGraphic"
scale="30"
xChannelSelector="R" />
</filter>
<filter id="displacementFilter2">
<feImage
href="mdn.svg"
x="0"
y="0"
width="100%"
height="100%"
result="abc" />
<feDisplacementMap
in2="abc"
in="SourceGraphic"
scale="30"
xChannelSelector="B" />
</filter>
<text x="10" y="60" font-size="50" filter="url(#displacementFilter)">
Some displaced text
</text>
<text x="10" y="120" font-size="50" filter="url(#displacementFilter2)">
Some displaced text
</text>
</svg>
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-xchannelselector |