SVGFEDistantLightElement.elevation — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDistantLightElement.elevation

Beschreibung

Die schreibgeschützte Eigenschaft elevation des Interfaces SVGFEDistantLightElement gibt ein SVGAnimatedNumber-Objekt zurück. Es entspricht dem Attribut elevation des Elements <feDistantLight>. Dieses Attribut gibt den Höhenwinkel einer unendlich weit entfernten Lichtquelle an, also den Winkel in Grad zwischen der XY-Ebene und der Lichtrichtung in Richtung z-Achse. 0 bedeutet streifendes Licht, 90 bedeutet Licht direkt von oben.

<feDistantLight> wird als Kindelement von <feDiffuseLighting> oder <feSpecularLighting> verwendet. Damit entstehen Relief-, Präge- oder Glanzeffekte auf Grafiken. Zusammen mit azimuth (Richtung in der XY-Ebene) legt elevation fest, aus welcher Richtung das Licht kommt.

„Schreibgeschützt“ bezieht sich nur auf die Eigenschaft selbst: Du kannst ihr kein anderes Objekt zuweisen. Den Wert änderst du über elevation.baseVal oder mit setAttribute('elevation', …). Mit elevation.animVal liest du den aktuell animierten Wert, zum Beispiel während einer SMIL-Animation mit <animate>.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Basiswert aus dem Attribut, beschreibbar) und animVal (aktuell animierter Wert, nur lesbar). Fehlt das Attribut, ist der Standardwert 0.

Beispiele

Höhenwinkel auslesen

// SVG mit Prägeeffekt
document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="100">
  <filter id="relief">
    <feDiffuseLighting in="SourceGraphic" lighting-color="white">
      <feDistantLight id="licht" azimuth="45" elevation="30" />
    </feDiffuseLighting>
  </filter>
  <rect width="200" height="100" fill="steelblue" filter="url(#relief)" />
</svg>`);

const licht = document.getElementById('licht');
console.log(licht.elevation.baseVal);
console.log(licht.elevation.animVal);

30 30

Lichtwinkel mit einem Schieberegler steuern

// Voraussetzung: <input type="range" id="regler" min="0" max="90">
const licht = document.querySelector('feDistantLight');
const regler = document.getElementById('regler');

regler.addEventListener('input', () => {
  // baseVal ist beschreibbar – der Filter wird sofort neu gerendert
  licht.elevation.baseVal = Number(regler.value);
  console.log(`Elevation: ${licht.elevation.baseVal}°`);
});

Elevation: 60° (beim Verschieben auf 60)

Element per Skript erzeugen und den Standardwert prüfen

const SVG_NS = 'http://www.w3.org/2000/svg';
const licht = document.createElementNS(SVG_NS, 'feDistantLight');

console.log(licht instanceof SVGFEDistantLightElement);
console.log(licht.elevation.baseVal); // Attribut fehlt -> 0

licht.setAttribute('elevation', '75');
console.log(licht.elevation.baseVal);

true 0 75

// Wichtig · Fallstricke

Keine Direktzuweisung: licht.elevation = 45 hat keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Im Strict Mode löst das einen TypeError aus. Setze stattdessen licht.elevation.baseVal.
Einheit ist Grad, nicht Bogenmaß. Werte außerhalb von 0–90 sind erlaubt: Negative Werte beleuchten die Fläche von unten, sodass sie meist dunkel erscheint.
animVal ist nur lesbar. Ohne laufende Animation hat es denselben Wert wie baseVal.
Namensraum: Erzeugst du das Element mit document.createElement statt mit createElementNS, entsteht kein SVGFEDistantLightElement, und elevation ist dann undefined.
Kompatibilität: Die Eigenschaft wird seit vielen Jahren in allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).
Leistung: Lichtfilter sind rechenintensiv. Häufige Änderungen, etwa bei jedem input-Ereignis auf großen Flächen, können die Darstellung bremsen. Drossle solche Aktualisierungen bei Bedarf, zum Beispiel mit requestAnimationFrame.

Siehe auch

SVGFEDistantLightElement SVGFEDistantLightElement.azimuth SVGAnimatedNumber SVGFEDiffuseLightingElement SVGFESpecularLightingElement SVGFEPointLightElement