SVGFETurbulenceElement.baseFrequencyX — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETurbulenceElement.baseFrequencyX

Beschreibung

Die schreibgeschützte Eigenschaft baseFrequencyX des Interfaces SVGFETurbulenceElement steht für die horizontale Grundfrequenz des Perlin-Rauschens, das der Filterprimitiv <feTurbulence> erzeugt. Sie entspricht dem ersten Zahlenwert im Attribut baseFrequency.

Zurückgegeben wird keine einfache Zahl, sondern ein SVGAnimatedNumber-Objekt. Mit baseVal liest du den im Attribut gesetzten Wert, mit animVal den aktuellen, gegebenenfalls durch SMIL-Animation (<animate>) veränderten Wert.

Steht in baseFrequency nur ein einziger Wert (z. B. baseFrequency="0.05"), gilt dieser für beide Achsen, und baseFrequencyX und baseFrequencyY liefern denselben Wert. Bei zwei Werten ("0.02 0.1") entspricht baseFrequencyX dem ersten. Fehlt das Attribut, ist der Wert 0.

Typischerweise nutzt du die Eigenschaft, um den aktuellen Zustand eines Rausch- oder Wellenfilters auszulesen, z. B. für Regler-Oberflächen, Debugging oder eine per JavaScript gesteuerte Animation, die vom vorhandenen Wert aus startet.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Grundwert aus dem Attribut) und animVal (aktueller, ggf. animierter Wert) für die X-Frequenz.

Beispiele

X-Frequenz aus einem Filter auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.02 0.1" numOctaves="3"/>
  </filter>`;
document.body.append(svg);

const turbulence = svg.querySelector('feTurbulence');
console.log(turbulence.baseFrequencyX.baseVal);
console.log(turbulence.baseFrequencyY.baseVal);

0.019999999552965164 0.10000000149011612

Ein Wert gilt für beide Achsen

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

const x = t.baseFrequencyX.baseVal.toFixed(2);
const y = t.baseFrequencyY.baseVal.toFixed(2);
console.log(`X: ${x}, Y: ${y}`);

X: 0.05, Y: 0.05

Nur die X-Frequenz über das Attribut ändern

const t = document.querySelector('feTurbulence');

// baseFrequencyX ist schreibgeschützt: Wert über das Attribut setzen
const setFrequencyX = (el, newX) => {
  const y = el.baseFrequencyY.baseVal;
  el.setAttribute('baseFrequency', `${newX} ${y}`);
};

setFrequencyX(t, 0.08);
console.log(t.baseFrequencyX.baseVal.toFixed(2));

0.08

Wellen-Effekt mit requestAnimationFrame

const t = document.querySelector('#wave feTurbulence');
const startX = t.baseFrequencyX.baseVal;
const y = t.baseFrequencyY.baseVal;

const tick = (time) => {
  const x = startX + Math.sin(time / 1000) * 0.005;
  t.setAttribute('baseFrequency', `${x.toFixed(4)} ${y}`);
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

// Wichtig · Fallstricke

Schreibgeschützt: Die Eigenschaft selbst lässt sich nicht neu zuweisen. Um den Wert zu ändern, setzt du das Attribut baseFrequency per setAttribute() (am einfachsten mit beiden Werten, damit die Y-Komponente erhalten bleibt).
Gleitkomma-Genauigkeit: Die Werte werden als 32-Bit-Gleitkommazahlen gespeichert, deshalb liefert baseVal z. B. 0.019999999552965164 statt 0.02. Zum Anzeigen toFixed() verwenden.
Negative Werte in baseFrequency sind ungültig und führen zu einem Fehler im Filter bzw. dazu, dass er nicht angewendet wird.
animVal weicht nur bei aktiver SMIL-Animation von baseVal ab. Änderungen über CSS-Animationen wirken sich hier nicht aus.
Performance: feTurbulence ist rechenintensiv. Wenn du die Frequenz in jedem Frame änderst, muss der Filter bei großen Flächen jedes Mal neu berechnet werden, was ruckeln kann.
Wird von allen modernen Browsern unterstützt. Das Element muss im SVG-Namensraum erzeugt werden (createElementNS), sonst gibt es die Eigenschaft nicht.

Siehe auch

SVGFETurbulenceElement SVGFETurbulenceElement.baseFrequencyY SVGFETurbulenceElement.numOctaves SVGFETurbulenceElement.seed SVGAnimatedNumber Element.setAttribute()