SVGComponentTransferFunctionElement.amplitude — Eigenschaft · JavaScript-Referenz

Signatur

SVGComponentTransferFunctionElement.amplitude

Beschreibung

Die schreibgeschützte Eigenschaft amplitude gibt ein SVGAnimatedNumber-Objekt zurück. Es steht für das amplitude-Attribut der Elemente <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA>. Diese Elemente stehen innerhalb eines <feComponentTransfer>-Filters und legen fest, wie jeder einzelne Farbkanal umgerechnet wird.

Das Attribut wirkt nur, wenn type="gamma" gesetzt ist. Dann wird jeder Kanalwert C nach der Formel C' = amplitude * pow(C, exponent) + offset berechnet. Fehlt das Attribut, gilt der Standardwert 1.

Die Eigenschaft selbst ist schreibgeschützt: Das Objekt können Sie nicht ersetzen. Den Wert ändern Sie trotzdem, nämlich über amplitude.baseVal oder mit setAttribute('amplitude', …). amplitude.animVal enthält den aktuell wirksamen Wert, also auch Änderungen durch eine SMIL-Animation wie <animate>.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit den Eigenschaften baseVal (Grundwert, änderbar) und animVal (aktuell wirksamer Wert, schreibgeschützt), beide vom Typ number.

Beispiele

Amplitude eines Gamma-Kanals auslesen

// Filter per JavaScript anlegen
const svgNS = 'http://www.w3.org/2000/svg';
const funcR = document.createElementNS(svgNS, 'feFuncR');
funcR.setAttribute('type', 'gamma');
funcR.setAttribute('amplitude', '2');

console.log(funcR.amplitude.baseVal);
console.log(funcR.amplitude.animVal);

2 2

Standardwert, wenn das Attribut fehlt

const svgNS = 'http://www.w3.org/2000/svg';
const funcG = document.createElementNS(svgNS, 'feFuncG');
funcG.setAttribute('type', 'gamma');

console.log(funcG.hasAttribute('amplitude'));
console.log(funcG.amplitude.baseVal);

false 1

Helligkeit mit einem Schieberegler steuern

// HTML: <input type="range" id="boost" min="0" max="3" step="0.1" value="1">
// SVG: <filter id="bright"><feComponentTransfer>
//        <feFuncR type="gamma" exponent="1" offset="0"/>
//        <feFuncG type="gamma" exponent="1" offset="0"/>
//        <feFuncB type="gamma" exponent="1" offset="0"/>
//      </feComponentTransfer></filter>
const funcs = document.querySelectorAll('#bright feFuncR, #bright feFuncG, #bright feFuncB');
const slider = document.querySelector('#boost');

slider.addEventListener('input', () => {
  const value = Number(slider.value);
  // baseVal ist änderbar, der Filter wird sofort neu berechnet
  funcs.forEach((fn) => { fn.amplitude.baseVal = value; });
  console.log(`Amplitude: ${funcs[0].amplitude.baseVal}`);
});

Amplitude: 1.5 (bei Reglerstellung 1.5)

// Wichtig · Fallstricke

amplitude wirkt nur bei type="gamma". Bei identity, table, discrete oder linear wird der Wert ignoriert, lässt sich aber trotzdem auslesen.
Eine Zuweisung wie el.amplitude = 2 hat keine Wirkung und löst im Strict Mode einen TypeError aus. Setzen Sie stattdessen el.amplitude.baseVal.
Das Schreiben von baseVal ändert auch das DOM-Attribut, und Änderungen am Attribut erscheinen in baseVal. Ungültige Attributwerte führen zum Standardwert 1.
Das Ergebnis der Gamma-Formel wird auf den Bereich 0–1 begrenzt. Sehr große Amplituden führen daher zu reinem Weiß bzw. voller Kanalsättigung.
Elemente müssen mit createElementNS im SVG-Namensraum erzeugt werden. Mit document.createElement fehlt die Eigenschaft.
Die Eigenschaft wird von allen aktuellen Browsern unterstützt.

Siehe auch

SVGComponentTransferFunctionElement SVGComponentTransferFunctionElement.exponent SVGComponentTransferFunctionElement.offset SVGComponentTransferFunctionElement.type SVGAnimatedNumber SVGFEComponentTransferElement SVGComponentTransferFunctionElement.tableValues