yChannelSelector
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с января 2020 г..
Атрибут yChannelSelector указывает, какой цветовой канал из in2 следует использовать для смещения пикселей в in вдоль оси y.
Элементы
Этот атрибут можно использовать с SVG-элементом <feDisplacementMap>.
Примечания по использованию
| Значение |
R | G | B | A
|
|---|---|
| Значение по умолчанию | A |
| Анимируемый | Да |
R-
Это ключевое слово указывает, что красный цветовой канал входного изображения, заданного в
in2, будет использоваться для смещения пикселей входного изображения, заданного вin, вдоль оси y. G-
Это ключевое слово указывает, что зелёный цветовой канал входного изображения, заданного в
in2, будет использоваться для смещения пикселей входного изображения, заданного вin, вдоль оси y. B-
Это ключевое слово указывает, что синий цветовой канал входного изображения, заданного в
in2, будет использоваться для смещения пикселей входного изображения, заданного вin, вдоль оси y. A-
Это ключевое слово указывает, что альфа-канал входного изображения, заданного в
in2, будет использоваться для смещения пикселей входного изображения, заданного вin, вдоль оси y.
Примеры
<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)">
Some displaced text
</text>
<text x="10" y="120" font-size="50" filter="url(#displacementFilter2)">
Some displaced text
</text>
</svg>
Спецификации
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
yChannelSelector |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 | 6 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/yChannelSelector