SVGFETurbulenceElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETurbulenceElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFETurbulenceElement gibt ein SVGAnimatedLength-Objekt zurück. Es steht für das height-Attribut des <feTurbulence>-Elements und legt die vertikale Größe des Teilbereichs fest, in dem diese Filterprimitive ihr Rauschmuster erzeugt.

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Den Wert ändert man über das zurückgegebene Objekt, also über height.baseVal.value, height.baseVal.valueAsString oder newValueSpecifiedUnits(). Alternativ setzt man das Attribut direkt mit setAttribute("height", …). height.animVal enthält den aktuellen Wert, wenn gerade eine SMIL-Animation läuft.

Fehlt das Attribut, beträgt der Standardwert 100% der Filterregion. Wie Prozentwerte und Zahlen ausgewertet werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab: Mit userSpaceOnUse (Standard) gelten Benutzereinheiten, mit objectBoundingBox Anteile an der Begrenzungsbox des gefilterten Elements.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, gegebenenfalls animierter Wert).

Beispiele

Höhe einer Turbulenz-Primitive auslesen

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

const turb = document.getElementById('turb');
console.log(turb.height instanceof SVGAnimatedLength);
console.log(turb.height.baseVal.value);
console.log(turb.height.baseVal.valueAsString);

true 120 120

Höhe per Skript ändern

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

// Wert über baseVal ändern – die Eigenschaft height selbst ist schreibgeschützt
turb.height.baseVal.value = 200;
console.log(turb.getAttribute('height'));

// Prozentwert über die Einheiten-API setzen
turb.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(turb.height.baseVal.valueAsString);

200 50%

Standardwert erkennen, wenn kein Attribut gesetzt ist

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

console.log(turb.hasAttribute('height'));
console.log(turb.height.baseVal.valueAsString);

// Neuzuweisung wird ignoriert (im strict mode: TypeError)
const getHeight = () => turb.height;
console.log(getHeight() === turb.height);

false 100% true

// Wichtig · Fallstricke

Schreibgeschützt: turb.height = 100 ändert nichts und löst im strict mode einen TypeError aus. Werte ändert man über height.baseVal oder setAttribute().
Prozentwerte: baseVal.value liefert bei Prozentangaben einen Wert in Benutzereinheiten, der vom Viewport abhängt. Befindet sich das Element nicht im Dokument, kann das Ergebnis unerwartet ausfallen. Den ursprünglich angegebenen Wert erhält man zuverlässiger über valueInSpecifiedUnits bzw. valueAsString.
Negative Werte oder 0 schalten die Filterprimitive ab, sodass ihr Ergebnis leer ist.
animVal spiegelt nur SMIL-Animationen wider, keine CSS-Animationen.
Diese Eigenschaft stammt aus SVGFilterPrimitiveStandardAttributes und wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFETurbulenceElement SVGFETurbulenceElement.width SVGFETurbulenceElement.x SVGFETurbulenceElement.y SVGAnimatedLength SVGLength SVGFETurbulenceElement.result