SVGFESpecularLightingElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFESpecularLightingElement gibt die vertikale Ausdehnung des Filterprimitiv-Teilbereichs (filter primitive subregion) zurück. Sie entspricht dem Attribut height des SVG-Elements <feSpecularLighting>, das Glanzlicht-Beleuchtungseffekte auf Basis eines Alphakanals als Höhenkarte berechnet.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Über baseVal erhält man den im Attribut festgelegten Grundwert als SVGLength, über animVal den aktuell (ggf. durch SMIL-Animation) wirksamen Wert. Die Eigenschaft selbst ist schreibgeschützt, der Grundwert lässt sich jedoch über baseVal.value, baseVal.valueAsString oder newValueSpecifiedUnits() ändern.

Ist das Attribut nicht gesetzt, gilt als Standard 100% – bezogen auf den Filterbereich bzw. auf die Bounding-Box, falls primitiveUnits="objectBoundingBox" am übergeordneten <filter> gesetzt ist. Sinnvoll ist das Auslesen oder Anpassen z. B., um den Beleuchtungseffekt nur auf einen Ausschnitt einer Grafik zu beschränken oder dynamisch an Elementgrößen anzupassen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (Grundwert als SVGLength) und animVal (animierter, schreibgeschützter Wert) für die Höhe des Filterprimitiv-Teilbereichs.

Beispiele

Höhe eines feSpecularLighting-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="glanz">
    <feSpecularLighting id="licht" y="0" height="120" specularExponent="20">
      <fePointLight x="50" y="50" z="100" />
    </feSpecularLighting>
  </filter>`;
document.body.append(svg);

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

120 true

Standardwert bei fehlendem Attribut

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

// Kein height-Attribut gesetzt → 100 %
console.log(el.height.baseVal.valueAsString);
console.log(el.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

100% true

Höhe dynamisch ändern

const licht = document.querySelector('feSpecularLighting');

// Grundwert per SVGLength-API setzen (Eigenschaft height selbst ist readonly)
licht.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);

console.log(licht.getAttribute('height'));
console.log(licht.height.animVal.valueAsString);

50% 50%

// Wichtig · Fallstricke

Schreibgeschützt: el.height = 100 hat keine Wirkung (im Strict-Modus TypeError). Ändern Sie stattdessen el.height.baseVal.value oder das Attribut per setAttribute('height', …).
animVal ist immer schreibgeschützt; ohne laufende Animation entspricht er baseVal.
Prozentwerte beziehen sich auf den Filterbereich; baseVal.value liefert bei Prozentangaben ggf. einen umgerechneten bzw. nicht aussagekräftigen Pixelwert – prüfen Sie unitType.
Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst existiert die Eigenschaft nicht.
Die Eigenschaft wird von allen modernen Browsern unterstützt; sie stammt aus der Mixin-Schnittstelle SVGFilterPrimitiveStandardAttributes.

Siehe auch

SVGFESpecularLightingElement SVGFESpecularLightingElement.width SVGFESpecularLightingElement.x SVGFESpecularLightingElement.y SVGAnimatedLength SVGLength