xChannelSelector

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

xChannelSelector attribute indicates which color channel from in2 to use to displace the pixels in in along the x-axis.

You can use this attribute with the following SVG elements:

<feDisplacementMap>

范例

html, body, svg {
  height: 100%;
}

<svg viewBox="0 0 440 160" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feImage xlink: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 xlink: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>

用法注意事项

值	`R` \| `G` \| `B` \| `A`
默认值	`A`
Animatable	Yes

R
G
B
A

规范

规范	状态	注释
Filter Effects Module Level 1 The definition of 'xChannelSelector' in that specification.	工作草案	无变化
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'xChannelSelector' in that specification.	推荐	初始定义

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者