Signatur
Beschreibung
Die Eigenschaft type des Interfaces SVGFETurbulenceElement spiegelt das SVG-Attribut type des Filterprimitivs <feTurbulence> wider. Dieses legt fest, ob der Filter die Perlin-Turbulenzfunktion (turbulence) oder fraktales Rauschen (fractalNoise) erzeugt. Beide Varianten werden häufig für Texturen wie Wolken, Marmor, Wasser oder Verzerrungseffekte verwendet.
Zurückgegeben wird kein String, sondern ein SVGAnimatedEnumeration-Objekt. Die Eigenschaft selbst kann nicht neu zugewiesen werden. Über baseVal kannst du den Wert aber lesen und schreiben. animVal ist nur lesbar und enthält den aktuellen, gegebenenfalls per SMIL animierten Wert.
Die Zahlenwerte entsprechen den Konstanten des Interfaces:
SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_UNKNOWN=0SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_FRACTALNOISE=1SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_TURBULENCE=2
Fehlt das Attribut, gilt der Standardwert turbulence. baseVal liefert dann 2.
Rückgabewert
baseVal (lesbar und schreibbar, Zahl 0–2) und animVal (nur lesbar, aktueller animierter Wert).Beispiele
Aktuellen Rauschtyp auslesen
const svgNS = 'http://www.w3.org/2000/svg';
const turb = document.createElementNS(svgNS, 'feTurbulence');
turb.setAttribute('type', 'fractalNoise');
console.log(turb.type.baseVal);
console.log(turb.type.baseVal === SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_FRACTALNOISE);Standardwert ohne Attribut
const turb = document.createElementNS('http://www.w3.org/2000/svg', 'feTurbulence');
// Kein type-Attribut gesetzt → Standard ist "turbulence"
console.log(turb.type.baseVal);
console.log(turb.getAttribute('type'));Per Button zwischen Turbulenz und fraktalem Rauschen umschalten
// HTML: <svg><filter id="noise"><feTurbulence id="turb" baseFrequency="0.05" numOctaves="3"/></filter>
// <rect width="300" height="200" filter="url(#noise)"/></svg>
// <button id="toggle">Typ wechseln</button>
const turb = document.getElementById('turb');
const { SVG_TURBULENCE_TYPE_FRACTALNOISE: FRACTAL, SVG_TURBULENCE_TYPE_TURBULENCE: TURB } = SVGFETurbulenceElement;
document.getElementById('toggle').addEventListener('click', () => {
turb.type.baseVal = turb.type.baseVal === FRACTAL ? TURB : FRACTAL;
console.log('Neuer Typ:', turb.getAttribute('type'));
});Zahlenwert in lesbaren Namen umwandeln
const typeNames = {
[SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_UNKNOWN]: 'unknown',
[SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_FRACTALNOISE]: 'fractalNoise',
[SVGFETurbulenceElement.SVG_TURBULENCE_TYPE_TURBULENCE]: 'turbulence'
};
const describe = (el) => typeNames[el.type.baseVal];
document.querySelectorAll('feTurbulence').forEach((el) => {
console.log(el.id || '(ohne id)', describe(el));
});// Wichtig · Fallstricke
- Kein String:
turb.typeist einSVGAnimatedEnumeration-Objekt. Vergleiche wieturb.type === 'fractalNoise'ergeben immerfalse. Nutzeturb.type.baseValzusammen mit den Konstanten odergetAttribute('type'). - Schreibgeschützt heißt: Die Eigenschaft selbst lässt sich nicht ersetzen.
turb.type = 1wird ignoriert oder wirft im Strict Mode einenTypeError. Ändere stattdessentype.baseValoder setze das Attribut direkt. - Wenn du
baseValauf0(UNKNOWN) oder einen ungültigen Wert setzt, wird einTypeErrorausgelöst. - Ein ungültiger Attributwert (z. B.
type="foo") führt je nach Browser zubaseVal=0oder zum Standardwert. Verlasse dich nicht auf ein bestimmtes Verhalten. - Performance:
feTurbulenceist rechenintensiv. Wenn du den Typ häufig wechselst oder zusätzlich hohenumOctaves-Werte animierst, kann das bei großen Flächen zu Rucklern führen. - Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).