SVGFESpecularLightingElement.surfaceScale — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.surfaceScale

Beschreibung

Die schreibgeschützte Eigenschaft surfaceScale der Schnittstelle SVGFESpecularLightingElement gibt ein SVGAnimatedNumber-Objekt zurück. Es steht für das Attribut surfaceScale des zugehörigen <feSpecularLighting>-Filterprimitivs.

Das Attribut legt fest, wie stark der Alphakanal der Eingabegrafik als Höhenkarte (Bump Map) gedeutet wird. Die Höhe jedes Pixels ist surfaceScale × Alpha. Größere Werte ergeben also eine plastischere Oberfläche mit deutlicheren Glanzlichtern und Kanten. Fehlt das Attribut, gilt der Standardwert 1.

„Schreibgeschützt“ heißt hier nur, dass du der Eigenschaft selbst kein neues Objekt zuweisen kannst. Den Wert änderst du über surfaceScale.baseVal. Den aktuell wirksamen Wert, auch während einer SMIL-Animation, liest du über surfaceScale.animVal. So lassen sich Licht- und Prägeeffekte per Skript steuern, etwa mit einem Schieberegler.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert, number) und animVal (aktuell wirksamer Wert, schreibgeschützt). Standardwert: 1.

Beispiele

Wert auslesen

// HTML: <svg><filter id="glanz"><feSpecularLighting id="licht" surfaceScale="5" specularExponent="20"><fePointLight x="50" y="50" z="100"/></feSpecularLighting></filter></svg>
const licht = document.getElementById('licht');
console.log(licht.surfaceScale.baseVal);
console.log(licht.surfaceScale.animVal);

5 5

Prägetiefe per Schieberegler steuern

const licht = document.querySelector('#glanz feSpecularLighting');
const regler = document.querySelector('#tiefe'); // <input type="range" id="tiefe" min="0" max="20" step="0.5">

regler.addEventListener('input', () => {
  // baseVal ist beschreibbar, das Attribut wird dabei mitgeändert
  licht.surfaceScale.baseVal = Number(regler.value);
  console.log(licht.getAttribute('surfaceScale'));
});

z. B. "7.5"

Element dynamisch erzeugen und Standardwert prüfen

const SVG_NS = 'http://www.w3.org/2000/svg';
const spec = document.createElementNS(SVG_NS, 'feSpecularLighting');
console.log(spec.surfaceScale.baseVal); // Standardwert ohne Attribut

spec.setAttribute('surfaceScale', '3');
console.log(spec.surfaceScale.baseVal);

1 3

// Wichtig · Fallstricke

Kein direktes Zuweisen: el.surfaceScale = 5 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Verwende stattdessen el.surfaceScale.baseVal = 5.
animVal ist immer schreibgeschützt. Es kann während einer <animate>-Animation von baseVal abweichen.
Den Attributnamen in camelCase schreiben (surfaceScale). Bei createElementNS muss der Elementname feSpecularLighting genau so geschrieben sein, sonst entsteht kein SVGFESpecularLightingElement.
Negative Werte sind erlaubt und kehren den Effekt um: Die Oberfläche wirkt dann eingedrückt statt erhaben.
Größere Filterflächen neu zu berechnen ist aufwendig. Häufige Änderungen, etwa in einer input-Schleife, können die Darstellung spürbar bremsen.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFESpecularLightingElement SVGFESpecularLightingElement.specularExponent SVGFESpecularLightingElement.specularConstant SVGFEDiffuseLightingElement.surfaceScale SVGAnimatedNumber