SVGFEDiffuseLightingElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDiffuseLightingElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEDiffuseLightingElement gibt die vertikale Ausdehnung des Teilbereichs der Filterprimitive <feDiffuseLighting> zurück. Dieser Teilbereich legt fest, auf welche Fläche das Ergebnis der diffusen Beleuchtung beschränkt wird. Die Eigenschaft stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes und steht deshalb bei allen Filterprimitiven (x, y, width, height, result) gleich zur Verfügung.

Als Wert erhält man ein SVGAnimatedLength-Objekt. Dieses hat zwei Eigenschaften: baseVal ist der im Attribut gesetzte Grundwert, animVal der aktuelle Wert während einer SMIL-Animation. Beide sind SVGLength-Objekte. Über value, valueInSpecifiedUnits, unitType und convertToSpecifiedUnits() kann man den Wert lesen oder umrechnen.

Die Eigenschaft selbst ist schreibgeschützt, das heißt, man kann ihr kein neues Objekt zuweisen. Den Wert ändert man stattdessen über height.baseVal.value bzw. baseVal.newValueSpecifiedUnits() oder direkt per setAttribute("height", …). Fehlt das Attribut, gilt standardmäßig 100% des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert) und animVal (animierter Wert), beide vom Typ SVGLength, für die Höhe des Teilbereichs der Filterprimitive.

Beispiele

Höhe einer feDiffuseLighting-Primitive auslesen

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.innerHTML = `
  <filter id="licht">
    <feDiffuseLighting id="diffus" x="0" y="0" width="200" height="120"
        surfaceScale="2" lighting-color="white">
      <fePointLight x="50" y="50" z="80" />
    </feDiffuseLighting>
  </filter>`;
document.body.append(svg);

const diffus = svg.querySelector("#diffus");
console.log(diffus.height.baseVal.value);
console.log(diffus.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

120 true

Höhe dynamisch ändern

const diffus = document.querySelector("feDiffuseLighting");

// Grundwert direkt in Nutzereinheiten setzen
diffus.height.baseVal.value = 80;
console.log(diffus.getAttribute("height"));

// Prozentwert setzen
diffus.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50
);
console.log(diffus.getAttribute("height"));

80 50%

Schreibschutz der Eigenschaft

'use strict';
const diffus = document.querySelector("feDiffuseLighting");
try {
  diffus.height = 100; // Zuweisung an die Eigenschaft selbst
} catch (err) {
  console.log(err instanceof TypeError);
}
// Richtig: über baseVal oder setAttribute
diffus.setAttribute("height", "100");
console.log(diffus.height.baseVal.value);

true 100

// Wichtig · Fallstricke

Schreibgeschützt: height selbst kann nicht neu zugewiesen werden. Im Strict Mode wirft eine Zuweisung einen TypeError, sonst wird sie stillschweigend ignoriert. Ändern Sie den Wert über baseVal oder setAttribute().
Prozentwerte: Bei %-Angaben liefert baseVal.value einen berechneten Wert, der von primitiveUnits des Filters und vom Filterbereich abhängt. Ist das Element nicht gerendert, kann das Ergebnis 0 oder ungenau sein. Für die ursprüngliche Angabe nutzen Sie valueInSpecifiedUnits.
primitiveUnits="objectBoundingBox": Dann sind Werte wie 0.5 Anteile der Bounding-Box des gefilterten Elements, keine Pixel.
Ein negativer Wert oder 0 schaltet die Primitive ab, sodass ihr Ergebnis leer bleibt.
animVal ist nur bei SMIL-Animationen vom Grundwert verschieden. CSS-Animationen wirken sich darauf nicht aus.
Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFEDiffuseLightingElement SVGFEDiffuseLightingElement.width SVGFEDiffuseLightingElement.x SVGFEDiffuseLightingElement.y SVGAnimatedLength SVGLength