Signatur
Beschreibung
Die schreibgeschützte Eigenschaft edgeMode des Interfaces SVGFEGaussianBlurElement gibt das edgeMode-Attribut des zugehörigen <feGaussianBlur>-Filterprimitivs zurück. Das Attribut legt fest, welche Farbwerte der Gauß'sche Weichzeichner verwendet, wenn er Pixel außerhalb des Eingabebildes abtasten muss. Das betrifft vor allem die Ränder: Ohne passende Einstellung „blutet“ transparentes Schwarz in das Bild hinein, sodass die Kanten ausfransen.
Der Rückgabewert ist ein SVGAnimatedEnumeration-Objekt. Über baseVal liest und setzt man den im Markup bzw. per Skript festgelegten Wert, animVal liefert den aktuellen, ggf. durch SMIL-Animation veränderten Wert (nur lesbar). Die Zahlenwerte entsprechen diesen Konstanten:
SVG_EDGEMODE_UNKNOWN(0) – unbekannter bzw. ungültiger WertSVG_EDGEMODE_DUPLICATE(1) –duplicate: Randpixel werden nach außen fortgesetztSVG_EDGEMODE_WRAP(2) –wrap: das Bild wird kachelartig von der Gegenseite fortgesetztSVG_EDGEMODE_NONE(3) –none: außerhalb liegt transparentes Schwarz (Standard bei<feGaussianBlur>)
Typischer Einsatzfall ist das Weichzeichnen von Fotos oder Hintergrundflächen, bei denen die Ränder nicht transparent auslaufen sollen – hier ist duplicate meist die richtige Wahl. Die Eigenschaft selbst kann nicht neu zugewiesen werden, wohl aber ihr baseVal.
Rückgabewert
baseVal (lesbar/schreibbar, number 0–3) und animVal (nur lesbar), die den Wert des edgeMode-Attributs abbilden.Beispiele
Aktuellen edgeMode auslesen
// <svg><filter id="blur"><feGaussianBlur id="gb" stdDeviation="5" edgeMode="duplicate"/></filter></svg>
const blur = document.getElementById('gb');
const namen = ['unknown', 'duplicate', 'wrap', 'none'];
const wert = blur.edgeMode.baseVal;
console.log(wert, namen[wert]);Randbehandlung per Skript umschalten
const blur = document.querySelector('#blur feGaussianBlur');
// Konstanten mit numerischem Fallback, falls der Browser sie nicht definiert
const DUPLICATE = SVGFEGaussianBlurElement.SVG_EDGEMODE_DUPLICATE ?? 1;
const NONE = SVGFEGaussianBlurElement.SVG_EDGEMODE_NONE ?? 3;
document.querySelector('#toggle').addEventListener('click', () => {
const em = blur.edgeMode;
em.baseVal = em.baseVal === DUPLICATE ? NONE : DUPLICATE;
console.log('Attribut jetzt:', blur.getAttribute('edgeMode'));
});Filter dynamisch erzeugen mit Feature-Erkennung
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'weich';
const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '8');
blur.setAttribute('edgeMode', 'duplicate');
filter.append(blur);
svg.querySelector('defs').append(filter);
if ('edgeMode' in blur) {
console.log('edgeMode unterstützt, Wert:', blur.edgeMode.baseVal);
} else {
console.log('edgeMode wird von diesem Browser nicht unterstützt');
}
document.querySelector('#foto').setAttribute('filter', 'url(#weich)');// Wichtig · Fallstricke
- Browser-Unterstützung uneinheitlich: Das
edgeMode-Attribut auf<feGaussianBlur>ist neuer als das gleichnamige Attribut auf<feConvolveMatrix>und wird nicht von allen Engines umgesetzt (Firefox hat es lange ignoriert). Vorher mit'edgeMode' in elementprüfen und das visuelle Ergebnis testen. - Anderer Standardwert: Bei
<feGaussianBlur>istnoneder Standard, bei<feConvolveMatrix>dagegenduplicate. - Schreibgeschützt heißt nicht unveränderlich:
element.edgeMode = …hat keine Wirkung (im Strict Mode gibt es einenTypeError). Geändert wird überedgeMode.baseValodersetAttribute('edgeMode', …). - Wird
baseValauf0(unknown) oder einen Wert außerhalb des gültigen Bereichs gesetzt, wirft der Browser einenTypeError. - Die Konstanten
SVG_EDGEMODE_*sind nicht in jedem Browser aufSVGFEGaussianBlurElementvorhanden – im Zweifel die Zahlenwerte 1–3 nutzen. - Als Alternative lassen sich Randartefakte vermeiden, indem man den Filterbereich mit
x,y,width,heightam<filter>vergrößert.