SVGFEDiffuseLightingElement.kernelUnitLengthY — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDiffuseLightingElement.kernelUnitLengthY

Beschreibung

Die Eigenschaft kernelUnitLengthY gehört zum Interface SVGFEDiffuseLightingElement und spiegelt die Y-Komponente des SVG-Attributs kernelUnitLength wider. Das Attribut legt fest, wie groß eine Einheit des Faltungskerns bei der Berechnung der Oberflächennormalen ist. Angegeben wird das im Koordinatensystem von primitiveUnits. Damit steuerst du, wie fein oder grob die Beleuchtung auf die Alpha-Werte der Eingabe (die „Höhenkarte“) reagiert.

Das Attribut kernelUnitLength nimmt eine oder zwei Zahlen an. Bei kernelUnitLength="2 3" ist die X-Komponente 2 und die Y-Komponente 3. Steht nur ein Wert da, gilt er für beide Richtungen. Die X-Komponente liest du über kernelUnitLengthX aus.

Die Eigenschaft selbst kannst du nicht neu zuweisen. Sie gibt ein SVGAnimatedNumber-Objekt zurück. Den statischen Attributwert findest du in baseVal, den aktuellen, eventuell per SMIL animierten Wert in animVal. Nutzen kannst du die Eigenschaft zum Beispiel, um Filterparameter auszulesen oder Werkzeuge zu bauen, die SVG-Filter untersuchen.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (Y-Wert aus dem Attribut) und animVal (aktueller, eventuell animierter Wert). Ist das Attribut nicht gesetzt, sind beide Werte 0.

Beispiele

Y-Komponente aus einem Filter auslesen

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

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

2 3

Ein Wert gilt für beide Richtungen

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

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

1.5 1.5

Wert über das Attribut ändern

// HTML: <svg><filter id="licht"><feDiffuseLighting id="diffus" kernelUnitLength="1 1"><feDistantLight azimuth="45" elevation="60"/></feDiffuseLighting></filter></svg>
const diffus = document.getElementById('diffus');

const setzeKernel = (x, y) => {
  // Die Eigenschaft ist schreibgeschützt, deshalb das Attribut setzen
  diffus.setAttribute('kernelUnitLength', `${x} ${y}`);
  console.log(`Y-Komponente: ${diffus.kernelUnitLengthY.baseVal}`);
};

setzeKernel(1, 4);

Y-Komponente: 4

// Wichtig · Fallstricke

Schreibgeschützt: diffus.kernelUnitLengthY = 3 hat keine Wirkung. Ändere stattdessen das Attribut mit setAttribute('kernelUnitLength', 'x y'). Laut Spezifikation soll auch das Setzen von kernelUnitLengthY.baseVal funktionieren. Browser setzen das aber nicht einheitlich um, deshalb ist setAttribute der sichere Weg.
Nicht gesetztes Attribut: Fehlt kernelUnitLength, liefert die Eigenschaft 0. Der Browser wählt dann selbst eine passende Kernelgröße, meist auf Basis der Gerätepixel. Deshalb kann die Darstellung je nach Bildschirmauflösung anders aussehen.
Deprecation: In SVG 2 bzw. Filter Effects Level 1 gilt kernelUnitLength als veraltet. Chromium und WebKit ignorieren den Wert beim Rendern teilweise. Die DOM-Eigenschaft gibt es trotzdem in allen modernen Browsern.
Negative Werte oder 0 im Attribut sind ein Fehler. Der Browser ignoriert das Attribut dann.

Siehe auch

SVGFEDiffuseLightingElement SVGFEDiffuseLightingElement.kernelUnitLengthX SVGFEDiffuseLightingElement.surfaceScale SVGFEDiffuseLightingElement.diffuseConstant SVGAnimatedNumber SVGFESpecularLightingElement.kernelUnitLengthY