SVGFESpecularLightingElement.kernelUnitLengthX — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.kernelUnitLengthX

Beschreibung

Die Eigenschaft kernelUnitLengthX der Schnittstelle SVGFESpecularLightingElement spiegelt den ersten Wert (x-Richtung) des Attributs kernelUnitLength eines <feSpecularLighting>-Filterelements wider. Dieses Attribut legt fest, wie groß eine „Einheit“ im Filterraster ist, also in welchem Abstand die Oberflächennormalen für die Glanzlicht-Berechnung ermittelt werden.

Der Rückgabewert ist ein SVGAnimatedNumber-Objekt. Über baseVal liest und setzt man den im Markup bzw. per Skript gesetzten Grundwert, über animVal liest man den aktuell wirksamen, eventuell durch SMIL-Animation veränderten Wert. Die Eigenschaft selbst ist schreibgeschützt; geändert wird ausschließlich über baseVal oder per setAttribute('kernelUnitLength', …).

Enthält kernelUnitLength nur einen Wert, gilt er für beide Richtungen – kernelUnitLengthX und kernelUnitLengthY liefern dann denselben Wert. Die Eigenschaft ist nützlich, um Beleuchtungseffekte auflösungsunabhängig zu machen oder die Detailtiefe der Glanzlichter per Skript dynamisch anzupassen.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (Grundwert, beschreibbar) und animVal (aktueller animierter Wert, nur lesbar) für die x-Komponente von kernelUnitLength. Ist das Attribut nicht gesetzt, ist der Wert 0.

Beispiele

x-Wert von kernelUnitLength auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const lighting = document.createElementNS(svgNS, 'feSpecularLighting');
lighting.setAttribute('kernelUnitLength', '2 3');

console.log(lighting.kernelUnitLengthX.baseVal);
console.log(lighting.kernelUnitLengthY.baseVal);

2 3

Ein einzelner Wert gilt für beide Richtungen

const svgNS = 'http://www.w3.org/2000/svg';
const lighting = document.createElementNS(svgNS, 'feSpecularLighting');
lighting.setAttribute('kernelUnitLength', '1.5');

const { kernelUnitLengthX, kernelUnitLengthY } = lighting;
console.log(kernelUnitLengthX.baseVal, kernelUnitLengthY.baseVal);

1.5 1.5

Glanzlicht-Detail per Schieberegler anpassen

// HTML: <input type="range" id="detail" min="0.5" max="5" step="0.5">
// SVG:  <feSpecularLighting id="spec" kernelUnitLength="1" ...>
const spec = document.getElementById('spec');
const slider = document.getElementById('detail');

slider.addEventListener('input', () => {
  const value = Number(slider.value);
  spec.kernelUnitLengthX.baseVal = value;
  spec.kernelUnitLengthY.baseVal = value;
  console.log('kernelUnitLength:', spec.getAttribute('kernelUnitLength'));
});

kernelUnitLength: 2 2 (bei Reglerwert 2)

// Wichtig · Fallstricke

Die Eigenschaft selbst ist schreibgeschützt – eine Zuweisung wie el.kernelUnitLengthX = 2 bleibt wirkungslos. Stattdessen baseVal setzen.
Ist kernelUnitLength nicht angegeben, liefert baseVal 0; der Browser wählt dann intern eine passende Auflösung. Negative Werte oder 0 im Attribut sind ein Fehler, dann wird der Filter unter Umständen nicht dargestellt.
Das Attribut kernelUnitLength gilt in SVG 2 als teilweise veraltet, und Browser setzen es bei der Darstellung uneinheitlich um. Die DOM-Eigenschaft ist zwar überall vorhanden, die sichtbare Wirkung kann aber je nach Browser unterschiedlich ausfallen.
Kleine Werte erzeugen feinere Details, kosten bei großen Filterflächen aber deutlich mehr Rechenleistung.

Siehe auch

SVGFESpecularLightingElement SVGFESpecularLightingElement.kernelUnitLengthY SVGFESpecularLightingElement.specularExponent SVGFESpecularLightingElement.surfaceScale SVGAnimatedNumber SVGFEDiffuseLightingElement.kernelUnitLengthX