SVGFEDisplacementMapElement.yChannelSelector — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDisplacementMapElement.yChannelSelector

Beschreibung

Die Eigenschaft yChannelSelector gibt an, welcher Farbkanal (R, G, B oder A) des zweiten Eingangsbildes (in2) eines <feDisplacementMap>-Filterprimitivs verwendet wird, um Pixel des ersten Eingangs (in) vertikal (entlang der Y-Achse) zu verschieben. Das Gegenstück für die horizontale Verschiebung ist xChannelSelector.

Zurückgegeben wird kein String, sondern ein SVGAnimatedEnumeration-Objekt. Dessen baseVal enthält den im Attribut gesetzten Wert als Zahl, animVal den aktuellen, ggf. durch SMIL-Animation veränderten Wert. Die Zahlen entsprechen den Konstanten des Interfaces:

SVGFEDisplacementMapElement.SVG_CHANNEL_UNKNOWN (0)
SVGFEDisplacementMapElement.SVG_CHANNEL_R (1)
SVGFEDisplacementMapElement.SVG_CHANNEL_G (2)
SVGFEDisplacementMapElement.SVG_CHANNEL_B (3)
SVGFEDisplacementMapElement.SVG_CHANNEL_A (4)

Die Eigenschaft selbst ist schreibgeschützt – man kann ihr kein neues Objekt zuweisen. Über yChannelSelector.baseVal lässt sich der Kanal jedoch per Skript ändern; das aktualisiert auch das zugehörige Attribut im DOM. Typische Einsatzfälle sind dynamische Verzerrungs-, Wellen- oder Glitch-Effekte, bei denen man zur Laufzeit zwischen Kanälen wechseln möchte.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Objekt mit baseVal (beschreibbar, Zahl 0–4) und animVal (nur lesbar, aktueller animierter Wert). Fehlt das Attribut, ist der Standardwert SVG_CHANNEL_A (4).

Beispiele

Aktuellen Kanal auslesen

// HTML: <svg><filter id="f"><feDisplacementMap id="dm" in="SourceGraphic" in2="noise" scale="20" yChannelSelector="G"/></filter></svg>
const dm = document.getElementById('dm');

console.log(dm.yChannelSelector.baseVal);
console.log(dm.yChannelSelector.baseVal === SVGFEDisplacementMapElement.SVG_CHANNEL_G);

2 true

Zahlenwert in Kanalbuchstaben umwandeln

const channelNames = ['UNKNOWN', 'R', 'G', 'B', 'A'];

const describeChannels = (el) => ({
  x: channelNames[el.xChannelSelector.baseVal],
  y: channelNames[el.yChannelSelector.baseVal]
});

const dm = document.querySelector('feDisplacementMap');
console.log(describeChannels(dm));

{ x: 'A', y: 'G' }

Kanal per Skript umschalten (Glitch-Effekt)

const svgNS = 'http://www.w3.org/2000/svg';
const dm = document.createElementNS(svgNS, 'feDisplacementMap');
dm.setAttribute('in', 'SourceGraphic');
dm.setAttribute('in2', 'turb');
dm.setAttribute('scale', '30');
document.querySelector('#f').append(dm);

// Standardwert ohne Attribut
console.log(dm.yChannelSelector.baseVal); // 4 (A)

const channels = [
  SVGFEDisplacementMapElement.SVG_CHANNEL_R,
  SVGFEDisplacementMapElement.SVG_CHANNEL_G,
  SVGFEDisplacementMapElement.SVG_CHANNEL_B
];
let i = 0;
setInterval(() => {
  dm.yChannelSelector.baseVal = channels[i++ % channels.length];
  console.log(dm.getAttribute('yChannelSelector'));
}, 500);

4 R G B ...

// Wichtig · Fallstricke

Kein String: dm.yChannelSelector liefert ein Objekt, nicht "G". Vergleiche immer über baseVal mit den SVG_CHANNEL_*-Konstanten.
Direkte Zuweisung wirkungslos: dm.yChannelSelector = 2 hat keinen Effekt (im Strict Mode TypeError). Richtig ist dm.yChannelSelector.baseVal = 2.
Das Setzen von baseVal auf 0 (SVG_CHANNEL_UNKNOWN) oder einen ungültigen Wert löst einen TypeError aus.
Groß-/Kleinschreibung: Das Attribut heißt yChannelSelector (camelCase). Bei createElementNS und setAttribute in SVG-Dokumenten korrekt schreiben; in HTML-eingebettetem SVG korrigiert der Parser die Schreibweise.
Kanalwerte werden im Farbraum gemäß color-interpolation-filters (Standard linearRGB) gelesen – das beeinflusst die Stärke der Verschiebung.
Kompatibilität: In allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt; komplexe Displacement-Filter können auf großen Flächen spürbar Rechenleistung kosten.

Siehe auch

SVGFEDisplacementMapElement SVGFEDisplacementMapElement.xChannelSelector SVGFEDisplacementMapElement.scale SVGFEDisplacementMapElement.in2 SVGAnimatedEnumeration SVGFETurbulenceElement