SVGFEGaussianBlurElement.height — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEGaussianBlurElement.height

Beschreibung

Die Eigenschaft height der Schnittstelle SVGFEGaussianBlurElement steht für das height-Attribut eines <feGaussianBlur>-Elements. Zusammen mit x, y und width legt sie den Filter-Primitive-Teilbereich fest. Nur in diesem Rechteck wird das Ergebnis der Weichzeichnung berechnet und ausgegeben.

Du bekommst ein SVGAnimatedLength-Objekt zurück, keine einfache Zahl. Über baseVal erreichst du den im Markup gesetzten Grundwert als SVGLength. Diesen Wert kannst du auch ändern. animVal liefert den Wert, der gerade gilt, und berücksichtigt dabei SMIL-Animationen. animVal kannst du nur lesen.

Fehlt das Attribut, gilt standardmäßig 100% des Filterbereichs. Worauf sich die Prozentangabe bezieht, bestimmt das Attribut primitiveUnits des übergeordneten <filter>-Elements. Mit der Eigenschaft beschränkst du den Weichzeichner gezielt auf einen Ausschnitt, zum Beispiel für Streifen-Effekte oder um Rechenzeit zu sparen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit den Eigenschaften baseVal (SVGLength, beschreibbar) und animVal (SVGLength, nur lesbar). Beide stehen für die Höhe des Teilbereichs der Filterprimitive.

Beispiele

Höhe eines feGaussianBlur auslesen

// Markup: <filter id="blur"><feGaussianBlur id="gb" stdDeviation="4" height="50%"/></filter>
const blur = document.getElementById('gb');
const h = blur.height.baseVal;
console.log(h.valueAsString);   // Wert wie im Attribut
console.log(h.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

50% true

Höhe per Skript ändern

const ns = 'http://www.w3.org/2000/svg';
const blur = document.createElementNS(ns, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '3');

// Neuen Wert in Benutzereinheiten setzen
blur.height.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_NUMBER, 40
);
console.log(blur.getAttribute('height'));

40

Weichzeichnung animiert von oben aufziehen

const blur = document.querySelector('#blur feGaussianBlur');
const len = blur.height.baseVal;
let pct = 0;

const step = () => {
  pct = Math.min(pct + 2, 100);
  len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, pct);
  if (pct < 100) requestAnimationFrame(step);
};
requestAnimationFrame(step);

// Wichtig · Fallstricke

Die Eigenschaft selbst kannst du nicht neu zuweisen: blur.height = 10 bewirkt nichts. Ändere stattdessen blur.height.baseVal oder rufe setAttribute('height', …) auf.
Negative Werte sind ungültig. Beim Wert 0 wird die Filterprimitive deaktiviert, und das Ergebnis ist transparent.
baseVal.value liefert Benutzereinheiten. Bei Prozentangaben kann dieser Wert ohne Layout-Kontext unerwartet ausfallen. Für den Originalwert nimm valueAsString.
Wie Prozentwerte ausgewertet werden, hängt von primitiveUnits am <filter> ab (userSpaceOnUse oder objectBoundingBox).
Alle modernen Browser unterstützen die Eigenschaft. Der Internet Explorer kennt sie nur eingeschränkt.

Siehe auch

SVGFEGaussianBlurElement SVGFEGaussianBlurElement.width SVGFEGaussianBlurElement.x SVGFEGaussianBlurElement.y SVGAnimatedLength SVGLength SVGFEGaussianBlurElement.edgeMode