SVGFEOffsetElement.dx — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEOffsetElement.dx

Beschreibung

Die Eigenschaft dx des Interfaces SVGFEOffsetElement gibt das dx-Attribut des zugehörigen <feOffset>-Filterprimitivs zurück. Dieses Attribut legt fest, um wie viele Einheiten das Eingabebild entlang der x-Achse verschoben wird. Positive Werte verschieben nach rechts, negative nach links.

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Sie liefert aber ein SVGAnimatedNumber-Objekt, dessen Eigenschaft baseVal beschreibbar ist. Über baseVal lässt sich der Versatz also per Skript ändern, ohne setAttribute() zu verwenden. animVal enthält den aktuell wirksamen Wert, etwa während einer SMIL-Animation.

Typische Einsatzfälle sind dynamische Schlagschatten (<feOffset> kombiniert mit <feGaussianBlur> und <feMerge>), deren Richtung sich z. B. an die Mausposition oder an eine simulierte Lichtquelle anpasst. Der Wert wird in dem Koordinatensystem interpretiert, das über das Attribut primitiveUnits des umgebenden <filter> festgelegt wird. Standardmäßig ist das userSpaceOnUse.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (beschreibbar, der im Attribut gesetzte Wert als number) und animVal (schreibgeschützt, der aktuell wirksame Wert). Fehlt das Attribut, sind beide Werte 0.

Beispiele

Horizontalen Versatz auslesen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="200" height="120">
    <filter id="schatten">
      <feOffset id="versatz" in="SourceAlpha" dx="6" dy="4" />
    </filter>
  </svg>`);

const offset = document.getElementById('versatz');
console.log(offset.dx instanceof SVGAnimatedNumber);
console.log(offset.dx.baseVal);
console.log(offset.dx.animVal);

true 6 6

Versatz per baseVal ändern

const offset = document.querySelector('feOffset');

// Nicht erlaubt: offset.dx = 10 (wird ignoriert bzw. wirft im Strict Mode einen Fehler)
offset.dx.baseVal = -8;

console.log(offset.getAttribute('dx'));

-8

Schlagschatten folgt der Maus

document.body.insertAdjacentHTML('beforeend', `
  <svg width="300" height="200">
    <filter id="drop" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
      <feOffset id="off" in="blur" dx="0" dy="0" result="shift" />
      <feMerge>
        <feMergeNode in="shift" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <rect x="100" y="60" width="100" height="80" fill="tomato" filter="url(#drop)" />
  </svg>`);

const off = document.getElementById('off');

document.addEventListener('pointermove', ({ clientX, clientY }) => {
  // Schatten fällt von der Maus weg, begrenzt auf ±12
  const clamp = (v) => Math.max(-12, Math.min(12, v));
  off.dx.baseVal = clamp((150 - clientX) / 10);
  off.dy.baseVal = clamp((100 - clientY) / 10);
});

// Wichtig · Fallstricke

Schreibschutz: Nur die Eigenschaft dx selbst ist schreibgeschützt. Änderungen erfolgen über dx.baseVal. animVal ist ebenfalls nur lesbar.
Nicht mit anderen dx-Attributen verwechseln: SVGTextPositioningElement.dx (bei <text>/<tspan>) liefert eine SVGAnimatedLengthList, keine einzelne Zahl.
Einheiten: Bei primitiveUnits="objectBoundingBox" ist der Wert ein Anteil der Breite des Begrenzungsrahmens (z. B. 0.1 = 10 %). Große Werte wie 10 verschieben das Bild dann weit aus dem Filterbereich hinaus.
Filterbereich: Wird die Grafik über den Filterbereich hinaus verschoben (Standard: -10 %/120 %), schneidet der Browser sie ab. Vergrößern Sie in dem Fall x/width am <filter>.
Performance: Häufige Änderungen, etwa bei pointermove, lösen jedes Mal eine Neuberechnung des Filters aus. Drosseln Sie die Aufrufe bei Bedarf mit requestAnimationFrame.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Für einfache Schatten ist die CSS-Funktion drop-shadow() oft die schnellere Alternative.

Siehe auch

SVGFEOffsetElement SVGFEOffsetElement.dy SVGFEOffsetElement.in1 SVGAnimatedNumber SVGFEDropShadowElement SVGFEGaussianBlurElement SVGStyleElement.disabled