SVGFEGaussianBlurElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEGaussianBlurElement extends SVGElement

Beschreibung

SVGFEGaussianBlurElement steht im DOM für ein <feGaussianBlur>-Element innerhalb eines SVG-<filter>. Das Primitiv zeichnet sein Eingabebild weich. Wie stark, legt die Standardabweichung stdDeviation fest, getrennt für die X- und die Y-Richtung. Man nutzt es für Schlagschatten, Glüheffekte, Tiefenunschärfe oder Bewegungsunschärfe in einer Richtung.

Die Schnittstelle erbt von SVGElement und bindet zusätzlich die Eigenschaften der Filterprimitive ein (SVGFilterPrimitiveStandardAttributes): x, y, width, height und result. Eigene Mitglieder:

in1 (SVGAnimatedString, nur lesbar): entspricht dem Attribut in, also der Eingabe, z. B. SourceGraphic, SourceAlpha oder der result-Name eines anderen Primitivs.
stdDeviationX / stdDeviationY (SVGAnimatedNumber, nur lesbar): Stärke der Unschärfe in X- bzw. Y-Richtung.
edgeMode (SVGAnimatedEnumeration, nur lesbar): legt fest, wie Pixel am Bildrand behandelt werden.
setStdDeviation(stdDeviationX, stdDeviationY): setzt beide Werte in einem Aufruf.
Konstanten: SVG_EDGEMODE_UNKNOWN (0), SVG_EDGEMODE_DUPLICATE (1), SVG_EDGEMODE_WRAP (2), SVG_EDGEMODE_NONE (3).

Die animierten Eigenschaften liefern Objekte mit baseVal (der Wert aus dem Attribut, beschreibbar) und animVal (der gerade wirksame Wert, etwa während einer SMIL-Animation, nur lesbar). Zur Laufzeit ändert man die Werte daher über baseVal, über setStdDeviation() oder über setAttribute('stdDeviation', …).

Parameter

Name	Typ	Default	Beschreibung
$stdDeviationX Pflicht	number		Parameter von `setStdDeviation()`: Standardabweichung in X-Richtung, angegeben in Einheiten von `primitiveUnits` des Filters. Negative Werte sind ein Fehler, `0` schaltet die Unschärfe in dieser Richtung ab.
$stdDeviationY Pflicht	number		Parameter von `setStdDeviation()`: Standardabweichung in Y-Richtung. Weicht der Wert von `stdDeviationX` ab, entsteht eine Unschärfe nur in einer Richtung, z. B. eine Bewegungsunschärfe.

Rückgabewert

Typ

SVGFEGaussianBlurElement

Beschreibung

Eine Instanz entsteht über document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur') oder durch Abfrage eines vorhandenen Elements. setStdDeviation() selbst gibt undefined zurück.

Beispiele

Weichzeichner-Filter per Skript erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

// <defs><filter id="blur"><feGaussianBlur/></filter></defs>
const defs = document.createElementNS(SVG_NS, 'defs');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'blur';

const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.setAttribute('in', 'SourceGraphic');
blur.setStdDeviation(4, 4);

filter.append(blur);
defs.append(filter);
svg.prepend(defs);

// Filter auf einen Kreis anwenden
svg.querySelector('circle').setAttribute('filter', 'url(#blur)');

console.log(blur instanceof SVGFEGaussianBlurElement);
console.log(blur.stdDeviationX.baseVal, blur.stdDeviationY.baseVal);

true 4 4

Unschärfe mit einem Schieberegler steuern

// HTML: <input type="range" id="staerke" min="0" max="20" value="0">
// SVG:  <filter id="f"><feGaussianBlur id="gb" stdDeviation="0"/></filter>
const blur = document.getElementById('gb');
const slider = document.getElementById('staerke');

slider.addEventListener('input', () => {
  const wert = Number(slider.value);
  blur.setStdDeviation(wert, wert);
  console.log(`Unschärfe: ${blur.stdDeviationX.baseVal}`);
});

Unschärfe: 7 (bei Reglerstellung 7)

Bewegungsunschärfe nur horizontal und Werte auslesen

// <feGaussianBlur id="motion" in="SourceGraphic" stdDeviation="12 0" result="verwischt"/>
const motion = document.getElementById('motion');

console.log(motion.in1.baseVal);           // Eingabe
console.log(motion.result.baseVal);        // Ergebnisname
console.log(motion.stdDeviationX.baseVal); // horizontal
console.log(motion.stdDeviationY.baseVal); // vertikal

// Nur die X-Richtung nachträglich ändern
motion.stdDeviationX.baseVal = 20;
console.log(motion.getAttribute('stdDeviation'));

SourceGraphic verwischt 12 0 20 0

Randbehandlung über edgeMode prüfen

const blur = document.querySelector('feGaussianBlur');
blur.setAttribute('edgeMode', 'duplicate');

const modus = blur.edgeMode.baseVal;
const namen = {
  [SVGFEGaussianBlurElement.SVG_EDGEMODE_UNKNOWN]: 'unknown',
  [SVGFEGaussianBlurElement.SVG_EDGEMODE_DUPLICATE]: 'duplicate',
  [SVGFEGaussianBlurElement.SVG_EDGEMODE_WRAP]: 'wrap',
  [SVGFEGaussianBlurElement.SVG_EDGEMODE_NONE]: 'none'
};
console.log(modus, namen[modus]);

1 duplicate

Siehe auch

SVGFEFuncRElement SVGFEDistantLightElement SVGFEDropShadowElement SVGFEFuncAElement SVGFEFuncBElement