SVGFEConvolveMatrixElement.edgeMode — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEConvolveMatrixElement.edgeMode

Beschreibung

Die Eigenschaft edgeMode des Interfaces SVGFEConvolveMatrixElement spiegelt das Attribut edgeMode des SVG-Filterprimitivs <feConvolveMatrix> wider. Das Attribut legt fest, wie das Eingabebild an seinen Rändern bei Bedarf erweitert wird, wenn die Faltungsmatrix über den Bildrand hinausreicht.

Zurückgegeben wird ein SVGAnimatedEnumeration-Objekt. Die Eigenschaft selbst ist schreibgeschützt, der enthaltene Wert baseVal lässt sich aber setzen und ändert damit das Attribut. animVal enthält den aktuell gültigen (ggf. animierten) Wert. Beide sind Zahlen, die den folgenden Konstanten entsprechen:

SVG_EDGEMODE_UNKNOWN (0) – unbekannter oder ungültiger Wert
SVG_EDGEMODE_DUPLICATE (1) – Randpixel werden wiederholt (duplicate, Standardwert)
SVG_EDGEMODE_WRAP (2) – das Bild wird von der gegenüberliegenden Seite fortgesetzt (wrap)
SVG_EDGEMODE_NONE (3) – außerhalb liegende Pixel gelten als transparentes Schwarz (none)

Man nutzt die Eigenschaft, um Filterparameter per Skript auszulesen oder umzuschalten, etwa um Randartefakte bei Schärfe- oder Kantenfiltern gezielt zu steuern.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Objekt mit baseVal (beschreibbar) und animVal (schreibgeschützt); beide enthalten eine der SVG_EDGEMODE_*-Konstanten als Zahl.

Beispiele

Aktuellen Randmodus auslesen

// <filter id="schaerfen"><feConvolveMatrix id="conv" order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" edgeMode="wrap"/></filter>
const conv = document.getElementById('conv');

const modi = {
  [SVGFEConvolveMatrixElement.SVG_EDGEMODE_UNKNOWN]: 'unknown',
  [SVGFEConvolveMatrixElement.SVG_EDGEMODE_DUPLICATE]: 'duplicate',
  [SVGFEConvolveMatrixElement.SVG_EDGEMODE_WRAP]: 'wrap',
  [SVGFEConvolveMatrixElement.SVG_EDGEMODE_NONE]: 'none'
};

console.log(conv.edgeMode.baseVal, modi[conv.edgeMode.baseVal]);

2 wrap

Randmodus per Skript umschalten

const conv = document.querySelector('feConvolveMatrix');

// Randpixel als transparent behandeln
conv.edgeMode.baseVal = SVGFEConvolveMatrixElement.SVG_EDGEMODE_NONE;

console.log(conv.getAttribute('edgeMode'));

none

Filter dynamisch erzeugen und Standardwert prüfen

const SVG_NS = 'http://www.w3.org/2000/svg';
const conv = document.createElementNS(SVG_NS, 'feConvolveMatrix');
conv.setAttribute('order', '3');
conv.setAttribute('kernelMatrix', '1 1 1 1 1 1 1 1 1');

// Ohne Attribut gilt der Standardwert "duplicate"
console.log(conv.edgeMode.baseVal === SVGFEConvolveMatrixElement.SVG_EDGEMODE_DUPLICATE);

conv.setAttribute('edgeMode', 'wrap');
console.log(conv.edgeMode.animVal);

true 2

// Wichtig · Fallstricke

edgeMode selbst kann nicht neu zugewiesen werden – conv.edgeMode = 2 bleibt wirkungslos (im Strict Mode gibt es einen TypeError). Ändern Sie stattdessen edgeMode.baseVal oder das Attribut.
Wird baseVal auf 0 (SVG_EDGEMODE_UNKNOWN) oder einen ungültigen Wert gesetzt, wird ein TypeError ausgelöst.
Werte werden als Zahlen geliefert, nicht als Zeichenketten – für lesbare Namen die Konstanten oder getAttribute('edgeMode') verwenden.
Der Wert mirror aus neueren Entwürfen der Filter-Effects-Spezifikation wird von den Browsern bisher kaum unterstützt und über diese Eigenschaft nicht zuverlässig abgebildet.
Die Eigenschaft wird in allen modernen Browsern unterstützt; die Darstellung von wrap kann sich zwischen den Render-Engines leicht unterscheiden.

Siehe auch

SVGFEConvolveMatrixElement SVGAnimatedEnumeration SVGFEConvolveMatrixElement.kernelMatrix SVGFEGaussianBlurElement SecurityPolicyViolationEvent.statusCode