yChannelSelector

基线

广泛可用

自 2020年1月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

查看完整兼容性
了解更多

yChannelSelector 属性指定使用 in2 的哪个颜色通道，沿 y 轴对 in 中的像素进行位移。

元素

你可以将此属性与 <feDisplacementMap> SVG 元素一起使用。

使用说明

值	`R` \| `G` \| `B` \| `A`
默认值	`A`
动画性	是

R: 该关键字指定使用 in2 所定义输入图像的红色通道，沿 y 轴对 in 所定义输入图像中的像素进行位移。
G: 该关键字指定使用 in2 所定义输入图像的绿色通道，沿 y 轴对 in 所定义输入图像中的像素进行位移。
B: 该关键字指定使用 in2 所定义输入图像的蓝色通道，沿 y 轴对 in 所定义输入图像中的像素进行位移。
A: 该关键字指定使用 in2 所定义输入图像的 alpha 通道，沿 y 轴对 in 所定义输入图像中的像素进行位移。

示例

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

html

<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"
      yChannelSelector="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"
      yChannelSelector="B" />
  </filter>

  <text x="10" y="60" font-size="50" filter="url(#displacementFilter)">
    一些位移文本
  </text>
  <text x="10" y="120" font-size="50" filter="url(#displacementFilter2)">
    一些位移文本
  </text>
</svg>

规范

规范
Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-ychannelselector

浏览器兼容性

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 2026年9月16日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题