SVGFEConvolveMatrixElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEConvolveMatrixElement.y

Beschreibung

Die Eigenschaft y des Interfaces SVGFEConvolveMatrixElement gibt das y-Attribut des Elements <feConvolveMatrix> zurück. Zusammen mit x, width und height legt es den Teilbereich der Filterprimitive fest (engl. „filter primitive subregion“). Nur innerhalb dieses Rechtecks wird das Ergebnis der Faltung berechnet und ausgegeben.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst kannst du nicht neu zuweisen. Über baseVal kommst du aber an den statischen Wert und kannst ihn ändern. animVal liefert den Wert, der gerade gilt, also inklusive einer eventuell laufenden SMIL-Animation.

Wie der Wert zu verstehen ist, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab. Bei userSpaceOnUse (Standard) ist er eine Länge im Benutzerkoordinatensystem. Bei objectBoundingBox ist er ein Anteil bzw. Prozentwert der Bounding Box des gefilterten Elements. Fehlt das Attribut, gilt standardmäßig 0%, und der Teilbereich deckt den gesamten Filterbereich ab.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbare SVGLength) und animVal (schreibgeschützte, aktuell wirksame SVGLength) für die vertikale Koordinate des Teilbereichs der Filterprimitive.

Beispiele

y-Wert eines feConvolveMatrix auslesen

// HTML: <svg><filter id="scharf"><feConvolveMatrix id="conv" y="20" order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/></filter></svg>
const conv = document.getElementById('conv');
console.log(conv.y.baseVal.value);
console.log(conv.y.animVal.value);

20 20

Filterteilbereich dynamisch verschieben

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'kante';
const conv = document.createElementNS(svgNS, 'feConvolveMatrix');
conv.setAttribute('order', '3');
conv.setAttribute('kernelMatrix', '-1 -1 -1 -1 8 -1 -1 -1 -1');
filter.append(conv);
svg.append(filter);
document.body.append(svg);

// y über baseVal setzen – das Attribut wird automatisch aktualisiert
conv.y.baseVal.value = 50;
console.log(conv.getAttribute('y'));

50

Einheit prüfen und in Prozent umwandeln

const conv = document.querySelector('feConvolveMatrix');
conv.setAttribute('y', '10%');
const len = conv.y.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.valueAsString);

// Neuen Wert direkt mit Einheit festlegen
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, 25);
console.log(conv.getAttribute('y'));

true 10% 25px

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie conv.y = 10 hat keine Wirkung (im Strict Mode wird ein TypeError geworfen). Ändere den Wert stattdessen über conv.y.baseVal.value oder setAttribute('y', …).
Bezugssystem: Wie der Wert gedeutet wird, hängt von primitiveUnits am <filter> ab. Bei objectBoundingBox entspricht z. B. 0.5 der halben Höhe der Bounding Box.
Der Teilbereich wird zusätzlich auf den Filterbereich (x/y/width/height des <filter>) beschnitten. Was außerhalb liegt, ist transparent.
value auf einer SVGLength mit Prozent-Einheit kann 0 oder einen umgerechneten Wert liefern, falls das Element nicht gerendert wird. Verlässlicher ist hier valueInSpecifiedUnits.
Die Eigenschaft wird in allen modernen Browsern unterstützt. Sie ist Teil von SVGFilterPrimitiveStandardAttributes und existiert gleichermaßen an allen SVGFE*Element-Interfaces.

Siehe auch

SVGFEConvolveMatrixElement SVGFEConvolveMatrixElement.x SVGFEConvolveMatrixElement.width SVGFEConvolveMatrixElement.height SVGAnimatedLength SVGLength WorkerNavigator.deviceMemory