SVGFEDisplacementMapElement.xChannelSelector — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDisplacementMapElement.xChannelSelector

Beschreibung

Die Eigenschaft xChannelSelector gehört zur Schnittstelle SVGFEDisplacementMapElement. Sie gibt an, welcher Farbkanal der Verschiebungskarte (Eingabe in2) die Pixel des Eingabebilds (in) entlang der x-Achse verschiebt. Das Gegenstück für die y-Achse ist yChannelSelector.

Zurückgegeben wird ein SVGAnimatedEnumeration-Objekt. Die Eigenschaft selbst ist schreibgeschützt, ihr Unterobjekt baseVal lässt sich aber setzen. Eine Änderung schreibt das Attribut xChannelSelector direkt im DOM um. animVal enthält den aktuellen, eventuell durch SMIL animierten Wert und kann nur gelesen werden.

Die Werte sind Zahlenkonstanten, die an SVGFEDisplacementMapElement definiert sind:

SVG_CHANNEL_UNKNOWN (0): unbekannter oder ungültiger Wert
SVG_CHANNEL_R (1): Rotkanal ("R")
SVG_CHANNEL_G (2): Grünkanal ("G")
SVG_CHANNEL_B (3): Blaukanal ("B")
SVG_CHANNEL_A (4): Alphakanal ("A", Standardwert)

Typische Anwendungen sind Verzerrungs-, Wellen- oder Glaseffekte, bei denen man den Kanal zur Laufzeit wechselt, etwa um verschiedene Effekte zu vergleichen oder sie abhängig von einer Benutzereingabe zu steuern.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, number von 0 bis 4) und animVal (nur lesbar). Ohne Attribut gilt SVG_CHANNEL_A (4).

Beispiele

Aktuellen Kanal auslesen

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

console.log(dm.xChannelSelector.baseVal);
console.log(dm.xChannelSelector.baseVal === SVGFEDisplacementMapElement.SVG_CHANNEL_R);

1 true

Element per Skript erzeugen und Kanal setzen

const NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(NS, 'filter');
const dm = document.createElementNS(NS, 'feDisplacementMap');
filter.append(dm);

// Ohne Attribut gilt der Standardwert A (4)
console.log(dm.xChannelSelector.baseVal);

// Über baseVal setzen – das Attribut wird automatisch aktualisiert
dm.xChannelSelector.baseVal = SVGFEDisplacementMapElement.SVG_CHANNEL_B;
console.log(dm.getAttribute('xChannelSelector'));

4 B

Kanal mit einem Auswahlfeld umschalten

// <select id="channel"><option>R</option><option>G</option><option>B</option><option>A</option></select>
const channelMap = {
  R: SVGFEDisplacementMapElement.SVG_CHANNEL_R,
  G: SVGFEDisplacementMapElement.SVG_CHANNEL_G,
  B: SVGFEDisplacementMapElement.SVG_CHANNEL_B,
  A: SVGFEDisplacementMapElement.SVG_CHANNEL_A,
};

const dm = document.querySelector('feDisplacementMap');
document.getElementById('channel').addEventListener('change', (e) => {
  dm.xChannelSelector.baseVal = channelMap[e.target.value];
  console.log(`x-Kanal: ${e.target.value}`);
});

x-Kanal: G

// Wichtig · Fallstricke

Nicht direkt zuweisen: dm.xChannelSelector = 1 hat keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Im strikten Modus wirft die Zuweisung einen TypeError. Ändern lässt sich der Wert nur über xChannelSelector.baseVal oder setAttribute('xChannelSelector', 'R').
Zahlen statt Zeichenketten: baseVal erwartet die Zahlenkonstanten 1 bis 4. Wer 0 (SVG_CHANNEL_UNKNOWN) oder einen Wert außerhalb des Bereichs zuweist, löst einen TypeError aus.
Groß-/Kleinschreibung: Das Attribut muss genau R, G, B oder A lauten, in Großbuchstaben. Ungültige Werte führen je nach Browser zum Standardwert A oder zu SVG_CHANNEL_UNKNOWN.
Die Verschiebungskarte wird in dem Farbraum ausgewertet, den color-interpolation-filters festlegt (Standard: linearRGB). Das kann zu anderen Ergebnissen führen als erwartet. Mit sRGB erhält man vorhersagbarere Werte.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Aufwendige Verschiebungsfilter auf großen Flächen können die Darstellung spürbar verlangsamen.

Siehe auch

SVGFEDisplacementMapElement SVGFEDisplacementMapElement.yChannelSelector SVGFEDisplacementMapElement.scale SVGFEDisplacementMapElement.in2 SVGAnimatedEnumeration SVGFETurbulenceElement