SVGFETurbulenceElement.baseFrequencyY — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETurbulenceElement.baseFrequencyY

Beschreibung

Die schreibgeschützte Eigenschaft baseFrequencyY des Interfaces SVGFETurbulenceElement steht für die vertikale Grundfrequenz des Rauschens, das ein <feTurbulence>-Filter erzeugt. Sie entspricht dem zweiten Wert des Attributs baseFrequency. Wurde dort nur ein Wert angegeben, gilt er für beide Achsen – baseFrequencyY hat dann denselben Wert wie baseFrequencyX.

Zurückgegeben wird eine Zahl nicht direkt, sondern ein SVGAnimatedNumber-Objekt. Über baseVal bekommst du den im Attribut gesetzten Grundwert, über animVal den aktuellen Wert, wenn gerade eine SMIL-Animation läuft (z. B. <animate attributeName="baseFrequency">). Die Eigenschaft selbst ist schreibgeschützt, man kann ihr also kein neues Objekt zuweisen.

Praktisch braucht man baseFrequencyY, wenn man per Skript prüfen will, wie ein Turbulenz-Filter eingestellt ist, etwa bei interaktiven Effekten für Wasser, Nebel, Holzmaserung oder Wellen. Unterschiedliche X- und Y-Frequenzen ergeben gestreckte Muster: Ist Y kleiner als X, wird das Rauschen vertikal gedehnt, ist Y größer, horizontal.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (Grundwert aus dem Attribut, number) und animVal (aktueller, eventuell animierter Wert, number, nur lesbar). Standardwert ist 0, wenn baseFrequency fehlt.

Beispiele

Y-Frequenz eines bestehenden Filters auslesen

// HTML: <svg><filter id="noise"><feTurbulence id="turb" baseFrequency="0.02 0.1" numOctaves="3"/></filter></svg>
const turb = document.getElementById('turb');

console.log(turb.baseFrequencyX.baseVal);
console.log(turb.baseFrequencyY.baseVal);

0.019999999552965164 0.10000000149011612

Ein Wert im Attribut gilt für beide Achsen

const SVG_NS = 'http://www.w3.org/2000/svg';
const turb = document.createElementNS(SVG_NS, 'feTurbulence');
turb.setAttribute('baseFrequency', '0.05');

const { baseFrequencyX: x, baseFrequencyY: y } = turb;
console.log(x.baseVal === y.baseVal); // gleiche Frequenz in X und Y
console.log(y.baseVal.toFixed(2));

true 0.05

Vertikale Frequenz per Schieberegler ändern

// HTML: <input type="range" id="ySlider" min="0.001" max="0.2" step="0.001">
const turb = document.querySelector('#noise feTurbulence');
const slider = document.getElementById('ySlider');

slider.addEventListener('input', () => {
  const x = turb.baseFrequencyX.baseVal;
  const y = Number(slider.value);
  // Beide Werte zusammen setzen, damit X erhalten bleibt
  turb.setAttribute('baseFrequency', `${x} ${y}`);
  console.log('Neue Y-Frequenz:', turb.baseFrequencyY.baseVal.toFixed(3));
});

Neue Y-Frequenz: 0.120

Animierten Wert (animVal) beobachten

// HTML: <feTurbulence id="turb" baseFrequency="0.01 0.01">
//   <animate attributeName="baseFrequency" values="0.01 0.01;0.01 0.1;0.01 0.01" dur="4s" repeatCount="indefinite"/>
// </feTurbulence>
const turb = document.getElementById('turb');

const log = () => {
  const { baseVal, animVal } = turb.baseFrequencyY;
  console.log(`Basis: ${baseVal.toFixed(3)}, aktuell: ${animVal.toFixed(3)}`);
};
setInterval(log, 1000);

Basis: 0.010, aktuell: 0.055

// Wichtig · Fallstricke

Schreibgeschützt: turb.baseFrequencyY = 0.1 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändern lässt sich nur baseFrequencyY.baseVal oder, am zuverlässigsten, das Attribut über setAttribute('baseFrequency', 'x y').
Doppelwert-Attribut: Weil X und Y aus demselben Attribut kommen, setzen manche Browser beim Schreiben von baseVal nicht sauber beide Werte zurück ins Attribut. Setze für browserübergreifend gleiches Verhalten deshalb beide Werte gemeinsam per setAttribute.
Genauigkeit: Die Werte werden als 32-Bit-Gleitkommazahlen gespeichert, daher liefert 0.1 z. B. 0.10000000149011612. Zum Vergleichen und Anzeigen runden (toFixed).
Negative Werte sind laut Spezifikation ungültig und führen zu einem Fehler bzw. dazu, dass der Filter nicht angewendet wird. 0 schaltet das Rauschen auf dieser Achse faktisch ab.
animVal ändert sich nur bei SMIL-Animationen, nicht bei CSS-Transitions, denn baseFrequency ist keine CSS-Eigenschaft.
Leistung: Turbulenzfilter mit hohem numOctaves auf großen Flächen sind aufwendig zu berechnen. Wenn du die Frequenz häufig änderst, drossle die Aktualisierungen (z. B. mit requestAnimationFrame).
Browser: Wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt.

Siehe auch

SVGFETurbulenceElement SVGFETurbulenceElement.baseFrequencyX SVGFETurbulenceElement.numOctaves SVGFETurbulenceElement.seed SVGFETurbulenceElement.type SVGAnimatedNumber Element.setAttribute()