SVGFETurbulenceElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETurbulenceElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGFETurbulenceElement spiegelt das Attribut x des Elements <feTurbulence> wider. Sie legt die horizontale Koordinate der linken oberen Ecke des Filterprimitiv-Teilbereichs fest, also des Rechtecks, in dem das Turbulenz- bzw. Rauschmuster berechnet und ausgegeben wird.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, der Wert lässt sich aber über x.baseVal (ein SVGLength) ändern, etwa mit baseVal.value oder baseVal.newValueSpecifiedUnits(). Über x.animVal liest man den aktuellen, gegebenenfalls per SMIL-Animation veränderten Wert.

Wie der Wert gedeutet wird, hängt vom Attribut primitiveUnits des umgebenden <filter> ab: Bei userSpaceOnUse (Standard) sind es Benutzerkoordinaten, bei objectBoundingBox Bruchteile bzw. Prozentwerte der Begrenzungsbox des gefilterten Elements. Fehlt das Attribut, ist der Standardwert 0% relativ zum Filterbereich.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbarer Basiswert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert).

Beispiele

x-Wert eines feTurbulence-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="rauschen">
    <feTurbulence id="turb" x="20" y="10" width="200" height="100"
                  baseFrequency="0.05" numOctaves="2" />
  </filter>`;
document.body.append(svg);

const turb = svg.querySelector('#turb');
console.log(turb.x.baseVal.value);
console.log(turb.x.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

20 true

Teilbereich des Rauschens per Skript verschieben

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

// Die Eigenschaft x ist schreibgeschützt – geändert wird baseVal
turb.x.baseVal.value = 50;
console.log(turb.getAttribute('x'));

// Prozentwert setzen
turb.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(turb.getAttribute('x'));

50 25%

Rauschbereich animiert über das Bild wandern lassen

const turb = document.querySelector('#turb');
let pos = 0;

const schritt = () => {
  pos = (pos + 1) % 200;
  turb.x.baseVal.value = pos;
  requestAnimationFrame(schritt);
};
requestAnimationFrame(schritt);

// Wichtig · Fallstricke

Keine direkte Zuweisung: turb.x = 10 bleibt wirkungslos (im Strict Mode TypeError). Ändern Sie stattdessen turb.x.baseVal.value oder das Attribut per setAttribute('x', …).
Einheiten beachten: baseVal.value liefert immer Benutzereinheiten; bei Prozentwerten ist valueInSpecifiedUnits aussagekräftiger. Prozentwerte werden vor dem Einfügen ins DOM ggf. nicht korrekt aufgelöst.
primitiveUnits: Bei objectBoundingBox bedeutet x=\"0.1\" 10 % der Begrenzungsbox, nicht 0,1 Pixel.
Performance: Häufige Änderungen an Filterprimitiven (z. B. pro Frame) erzwingen ein Neuberechnen des Filters; feTurbulence ist dabei relativ teuer.
Elemente müssen mit createElementNS im SVG-Namensraum erzeugt werden, sonst existiert die Eigenschaft nicht. Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFETurbulenceElement SVGFETurbulenceElement.y SVGFETurbulenceElement.width SVGFETurbulenceElement.height SVGAnimatedLength SVGLength Window.fullScreen