Baseline Widely available
The xChannelSelector
read-only property of the SVGFEDisplacementMapElement
interface reflects the xChannelSelector
attribute of the given <feDisplacementMap>
element. It takes one of the SVG_CHANNEL_*
constants defined on this interface.
An SVGAnimatedEnumeration
object.
xChannelSelector
attribute
In this example, the <feDisplacementMap>
element defined in the <filter>
includes a xChannelSelector
attribute.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="displacementFilter">
<!-- Displacement Map with xChannelSelector set to Red Channel -->
<feDisplacementMap in="SourceGraphic" scale="20" xChannelSelector="R">
<feFuncR type="table" tableValues="0 1" />
</feDisplacementMap>
</filter>
</defs>
<rect
x="20"
y="20"
width="100"
height="100"
fill="red"
filter="url(#displacementFilter)" />
</svg>
We can access the xChannelSelector
attribute and get its value:
const displacementMap = document.querySelector("feDisplacementMap");
console.log(displacementMap.xChannelSelector.baseVal); // Output: 1 (SVG_CHANNEL_R)
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4