yChannelSelector

Baseline Widely available

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

Das yChannelSelector Attribut gibt an, welcher Farbkanal von in2 verwendet werden soll, um die Pixel in in entlang der y-Achse zu verschieben.

Elemente

Sie können dieses Attribut mit dem SVG-Element <feDisplacementMap> verwenden.

Nutzungshinweise

Wert	`R` \| `G` \| `B` \| `A`
Standardwert	`A`
Animierbar	Ja

R: Dieses Schlüsselwort gibt an, dass der rote Farbkanal des Eingabebildes, das in in2 definiert ist, verwendet wird, um die Pixel des Eingabebildes, das in in definiert ist, entlang der y-Achse zu verschieben.
G: Dieses Schlüsselwort gibt an, dass der grüne Farbkanal des Eingabebildes, das in in2 definiert ist, verwendet wird, um die Pixel des Eingabebildes, das in in definiert ist, entlang der y-Achse zu verschieben.
B: Dieses Schlüsselwort gibt an, dass der blaue Farbkanal des Eingabebildes, das in in2 definiert ist, verwendet wird, um die Pixel des Eingabebildes, das in in definiert ist, entlang der y-Achse zu verschieben.
A: Dieses Schlüsselwort gibt an, dass der Alphakanal des Eingabebildes, das in in2 definiert ist, verwendet wird, um die Pixel des Eingabebildes, das in in definiert ist, entlang der y-Achse zu verschieben.

Beispiele

html,
body,
svg {
  height: 100%;
}

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"
      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>

Spezifikationen

Specification
Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-ychannelselector

Browser-Kompatibilität

BCD tables only load in the browser