Signatur
Beschreibung
Die Eigenschaft orderY des Interfaces SVGFEConvolveMatrixElement gibt die Anzahl der Zeilen der Faltungsmatrix (Kernel) eines <feConvolveMatrix>-Filterprimitivs zurück. Sie entspricht dem zweiten Wert des Attributs order, das die Form order="orderX [orderY]" hat.
Wird im Attribut nur ein Wert angegeben (z. B. order="3"), gilt dieser für beide Richtungen – orderY ist dann gleich orderX. Fehlt das Attribut ganz, ist der Standardwert 3. Die Kernelgröße bestimmt, wie viele Werte kernelMatrix enthalten muss: genau orderX × orderY.
Der Rückgabewert ist ein SVGAnimatedInteger-Objekt: baseVal enthält den im Markup gesetzten Wert, animVal den aktuellen (ggf. per SMIL animierten) Wert. Die Eigenschaft selbst ist schreibgeschützt; um die Größe zu ändern, setzt man zuverlässig das Attribut order per setAttribute().
Typische Anwendungsfälle sind das Auslesen oder Validieren der Kernelgröße, bevor man eine kernelMatrix dynamisch erzeugt – etwa für Weichzeichner-, Schärfe- oder Kantenerkennungsfilter mit nicht-quadratischen Kerneln (z. B. Bewegungsunschärfe in vertikaler Richtung).
Rückgabewert
baseVal (Grundwert aus dem Attribut) und animVal (aktueller, ggf. animierter Wert) – beide eine ganze Zahl > 0 für die Zeilenzahl des Kernels.Beispiele
orderY aus einem Filter im Dokument auslesen
// <svg><filter id="f"><feConvolveMatrix id="conv" order="3 5"
// kernelMatrix="1 0 0 1 0 0 1 0 0 1 0 0 1 0 0"/></filter></svg>
const conv = document.getElementById('conv');
console.log(conv.orderX.baseVal);
console.log(conv.orderY.baseVal);
console.log(conv.orderY.animVal);Nur ein Wert im order-Attribut und Standardwert
const NS = 'http://www.w3.org/2000/svg';
const a = document.createElementNS(NS, 'feConvolveMatrix');
a.setAttribute('order', '4');
console.log(a.orderY.baseVal); // übernimmt orderX
const b = document.createElementNS(NS, 'feConvolveMatrix');
console.log(b.orderY.baseVal); // kein Attribut → StandardwertVertikale Bewegungsunschärfe mit passender kernelMatrix erzeugen
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const filter = document.createElementNS(NS, 'filter');
filter.id = 'motionY';
const conv = document.createElementNS(NS, 'feConvolveMatrix');
// Kernel: 1 Spalte, 7 Zeilen
conv.setAttribute('order', '1 7');
// Matrix-Länge aus orderX × orderY ableiten
const size = conv.orderX.baseVal * conv.orderY.baseVal;
conv.setAttribute('kernelMatrix', Array(size).fill(1).join(' '));
filter.append(conv);
svg.append(filter);
document.body.append(svg);
console.log(`Kernel: ${conv.orderX.baseVal}×${conv.orderY.baseVal}, ${size} Werte`);kernelMatrix gegen orderY validieren
const isValidKernel = (el) => {
const values = el.getAttribute('kernelMatrix')?.trim().split(/[\s,]+/) ?? [];
return values.length === el.orderX.baseVal * el.orderY.baseVal;
};
document.querySelectorAll('feConvolveMatrix').forEach((el) => {
if (!isValidKernel(el)) {
console.warn('Ungültige kernelMatrix für order', el.getAttribute('order'));
}
});// Wichtig · Fallstricke
- Kein eigenes Attribut: Es gibt kein
orderY-Attribut im Markup – nurorder="X Y". Ist nur ein Wert angegeben, istorderYgleichorderX. - Schreibgeschützt: Die Eigenschaft selbst kann nicht neu zugewiesen werden. Das Setzen von
orderY.baseValwird nicht in allen Browsern zuverlässig ins Attribut übernommen – ändere die Größe besser übersetAttribute('order', …). - Ungültige Werte: Werte ≤ 0 oder nicht-ganzzahlige Werte sind ein Fehler; das Filterprimitiv wird dann nicht angewendet (je nach Browser wird das Element transparent dargestellt oder der Filter ignoriert). Stimmt die Anzahl der Werte in
kernelMatrixnicht mitorderX × orderYüberein, schlägt der Filter ebenfalls fehl. - Performance: Große Kernel (z. B. 15×15) sind rechenintensiv, vor allem bei großen Flächen oder Animationen.
- Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).