xChannelSelector
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
xChannelSelector 属性は、in2 のどの色チャンネルを使用して、in のピクセルを x 軸に沿って変位させるかを示します。
要素
この属性は、SVG の <feDisplacementMap> 要素で使用できます。
使用上のメモ
| 値 | R | G | B | A |
|---|---|
| デフォルト値 | A |
| アニメーション | 可 |
R-
このキーワードは、
in2で定義された入力画像の赤色チャンネルを使用して、inで定義された入力画像のピクセルを x 軸に沿って変位させることを指定します。 G-
このキーワードは、
in2で定義された入力画像の緑色チャンネルを使用して、inで定義された入力画像のピクセルを x 軸に沿って変位させることを指定します。 B-
このキーワードは、
in2で定義された入力画像の青色チャンネルを使用して、inで定義された入力画像のピクセルを x 軸に沿って変位させることを指定します。 A-
このキーワードは、
in2で定義された入力画像のアルファチャンネルを使用して、inで定義された入力画像のピクセルを x 軸に沿って変位させることを指定します。
例
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"
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>
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-xchannelselector |