SVGFEDisplacementMapElement: yChannelSelector-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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)