SVGFETurbulenceElement.numOctaves — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETurbulenceElement.numOctaves

Beschreibung

Die schreibgeschützte Eigenschaft numOctaves der Schnittstelle SVGFETurbulenceElement gibt ein SVGAnimatedInteger-Objekt zurück. Es steht für das Attribut numOctaves des zugehörigen <feTurbulence>-Filterprimitivs. Das Attribut legt fest, wie viele Oktaven (Rauschfunktionen) die Perlin-Noise-Funktion übereinanderlegt.

Je mehr Oktaven, desto feiner und detailreicher wird das Rauschen. Das kostet allerdings Rechenzeit. Ab etwa 6–8 Oktaven sieht man meist keinen Unterschied mehr, weil die zusätzlichen Details kleiner als ein Pixel werden. Fehlt das Attribut, gilt der Standardwert 1.

Schreibgeschützt ist nur die Eigenschaft selbst, also der Verweis auf das SVGAnimatedInteger-Objekt. Den Wert können Sie trotzdem ändern: über numOctaves.baseVal oder mit setAttribute("numOctaves", …). numOctaves.animVal liefert den aktuellen Wert, auch während einer laufenden SMIL-Animation. So lassen sich prozedurale Texturen wie Wolken, Marmor, Papierstruktur oder Wasser zur Laufzeit per Skript anpassen.

Rückgabewert

Typ

SVGAnimatedInteger

Beschreibung

Objekt mit baseVal (Grundwert, beschreibbar) und animVal (aktueller, ggf. animierter Wert, nur lesbar). Beide enthalten die Anzahl der Oktaven als Ganzzahl; der Standardwert ist 1.

Beispiele

Oktavenzahl auslesen

// <svg><filter id="noise"><feTurbulence id="turb" type="fractalNoise" baseFrequency="0.05" numOctaves="4"/></filter></svg>
const turb = document.getElementById("turb");

console.log(turb.numOctaves.baseVal);
console.log(turb.numOctaves.animVal);

4 4

Detailgrad per Schieberegler steuern

// <input type="range" id="detail" min="1" max="8" value="2">
const turb = document.querySelector("feTurbulence");
const slider = document.getElementById("detail");

slider.addEventListener("input", () => {
  // baseVal ist beschreibbar, numOctaves selbst nicht
  turb.numOctaves.baseVal = Number(slider.value);
  console.log(`Oktaven: ${turb.getAttribute("numOctaves")}`);
});

Oktaven: 5 (bei Reglerstellung 5)

Filter komplett per Skript erzeugen

const NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(NS, "svg");
const filter = document.createElementNS(NS, "filter");
filter.id = "clouds";

const turb = document.createElementNS(NS, "feTurbulence");
turb.setAttribute("type", "fractalNoise");
turb.setAttribute("baseFrequency", "0.01");

console.log(turb.numOctaves.baseVal); // Standardwert
turb.setAttribute("numOctaves", "6");
console.log(turb.numOctaves.baseVal);

filter.append(turb);
svg.append(filter);
document.body.append(svg);

1 6

// Wichtig · Fallstricke

Nicht direkt zuweisen: turb.numOctaves = 3 hat keine Wirkung und löst im Strict Mode einen TypeError aus. Setzen Sie stattdessen numOctaves.baseVal.
Performance: Der Rechenaufwand wächst ungefähr linear mit der Anzahl der Oktaven. Das fällt besonders bei großen Filterflächen oder animiertem Rauschen auf. Werte über 8 bringen optisch kaum noch etwas.
Ungültige Werte: Negative Werte oder Werte, die keine Zahl sind, gelten als Fehler. Browser gehen damit unterschiedlich um (Standardwert 1 oder Filter wird nicht angewendet). Werte von baseVal vorher prüfen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. animVal unterscheidet sich von baseVal nur bei SMIL-Animationen (<animate>). CSS-Animationen wirken auf dieses Attribut nicht.

Siehe auch

SVGFETurbulenceElement SVGFETurbulenceElement.baseFrequencyX SVGFETurbulenceElement.seed SVGFETurbulenceElement.type SVGAnimatedInteger SVGFEDisplacementMapElement