SVGFEDistantLightElement.azimuth — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDistantLightElement.azimuth

Beschreibung

Die Eigenschaft azimuth der Schnittstelle SVGFEDistantLightElement spiegelt das Attribut azimuth des Elements <feDistantLight> wider. Der Wert gibt die Richtung einer weit entfernten Lichtquelle in der XY-Ebene an. Er wird in Grad im Uhrzeigersinn ab der x-Achse gemessen. Fehlt das Attribut, ist der Wert 0.

Die Eigenschaft ist schreibgeschützt, gibt aber ein SVGAnimatedNumber-Objekt zurück. Über baseVal kannst du den Grundwert lesen und schreiben. Das ändert direkt das Attribut im DOM. animVal enthält den aktuellen, eventuell per SMIL animierten Wert und lässt sich nur lesen.

Typische Anwendungsfälle sind interaktive Lichteffekte, zum Beispiel eine Lichtquelle, die sich per Schieberegler oder Mausbewegung um ein Objekt dreht, in Filtern mit <feDiffuseLighting> oder <feSpecularLighting>. Zusammen mit elevation legt azimuth die Lichtrichtung vollständig fest.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Grundwert in Grad, schreibbar) und animVal (animierter Wert, nur lesbar).

Beispiele

Azimut-Wert auslesen

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="licht">
    <feDiffuseLighting in="SourceGraphic">
      <feDistantLight id="sonne" azimuth="45" elevation="30" />
    </feDiffuseLighting>
  </filter>
</svg>`;
document.body.insertAdjacentHTML('beforeend', svg);

const light = document.getElementById('sonne');
console.log(light.azimuth.baseVal);
console.log(light.azimuth.animVal);

45 45

Lichtrichtung per Schieberegler steuern

// Setzt voraus: <input type="range" id="regler" min="0" max="360">
const light = document.querySelector('feDistantLight');
const regler = document.getElementById('regler');

regler.addEventListener('input', () => {
  // baseVal ist schreibbar und aktualisiert das Attribut
  light.azimuth.baseVal = Number(regler.value);
  console.log(light.getAttribute('azimuth'));
});

z. B. "120" beim Verschieben auf 120

Rotierende Lichtquelle animieren

const light = document.querySelector('feDistantLight');

const rotate = (time) => {
  // eine volle Umdrehung alle 4 Sekunden
  light.azimuth.baseVal = (time / 4000 * 360) % 360;
  requestAnimationFrame(rotate);
};
requestAnimationFrame(rotate);

// Wichtig · Fallstricke

light.azimuth = 90 funktioniert nicht: Die Eigenschaft selbst ist schreibgeschützt. Die Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Setze stattdessen azimuth.baseVal oder rufe setAttribute('azimuth', '90') auf.
Der Wert ist immer eine Zahl in Grad, nicht im Bogenmaß. Werte außerhalb von 0–360 sind erlaubt und wirken periodisch.
Bei laufender SMIL-Animation (<animate attributeName=\"azimuth\">) weicht animVal von baseVal ab.
Filter mit Beleuchtung können rechenintensiv sein. Häufige Änderungen pro Frame können bei großen Flächen die Leistung spürbar verschlechtern.
Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFEDistantLightElement SVGFEDistantLightElement.elevation SVGAnimatedNumber SVGFEDiffuseLightingElement SVGFESpecularLightingElement SVGFEPointLightElement