SVGFEDisplacementMapElement: yChannelSelector-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.

Die schreibgeschützte Eigenschaft yChannelSelector des SVGFEDisplacementMapElement-Interfaces spiegelt das yChannelSelector-Attribut des gegebenen <feDisplacementMap>-Elements wider. Es nimmt einen der SVG_CHANNEL_*-Konstanten an, die in diesem Interface definiert sind.

Wert

Ein SVGAnimatedEnumeration-Objekt.

Beispiele

Zugriff auf das `yChannelSelector`-Attribut

In diesem Beispiel enthält das im <filter> definierte <feDisplacementMap>-Element ein yChannelSelector-Attribut.

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="displacementFilter">
      <!-- Displacement Map with yChannelSelector set to Red Channel -->
      <feDisplacementMap in="SourceGraphic" scale="20" yChannelSelector="G">
        <feFuncR type="table" tableValues="0 1" />
      </feDisplacementMap>
    </filter>
  </defs>
  <rect
    x="20"
    y="20"
    width="100"
    height="100"
    fill="green"
    filter="url(#displacementFilter)" />
</svg>

Wir können auf das yChannelSelector-Attribut zugreifen und seinen Wert erhalten:

const displacementMap = document.querySelector("feDisplacementMap");

console.log(displacementMap.yChannelSelector.baseVal); // Output: 2 (SVG_CHANNEL_G)