Signatur
Beschreibung
Die schreibgeschützte Eigenschaft targetX der Schnittstelle SVGFEConvolveMatrixElement spiegelt das SVG-Attribut targetX des Filter-Primitivs <feConvolveMatrix> wider. Das Attribut legt die Spalte der Faltungsmatrix (Kernel) fest, die über dem aktuell berechneten Pixel liegt. Zusammen mit targetY bestimmt es also den Ankerpunkt des Kernels.
Der Wert ist eine ganze Zahl zwischen 0 und orderX - 1. Ist das Attribut nicht angegeben, verwendet der Renderer beim Zeichnen die Mitte der Matrix, also Math.floor(orderX / 2). Wenn du targetX aus der Mitte verschiebst, wird das Ergebnis des Filters versetzt. Das ist zum Beispiel nützlich bei gerichteten Effekten wie Prägung (Emboss) oder Bewegungsunschärfe.
Die Eigenschaft selbst ist schreibgeschützt. Du bekommst jedoch ein SVGAnimatedInteger-Objekt zurück. Über dessen Eigenschaft baseVal kannst du den Wert lesen und setzen. animVal liefert den aktuell animierten Wert und ist nur lesbar.
Rückgabewert
baseVal (lesbar und schreibbar, ganze Zahl) und animVal (nur lesbar, animierter Wert). Beide geben die Spaltenposition des Kernel-Ankerpunkts an.Beispiele
targetX eines vorhandenen Filters auslesen
// HTML:
// <svg width="0" height="0">
// <filter id="emboss">
// <feConvolveMatrix id="conv" order="3" targetX="0" targetY="0"
// kernelMatrix="-2 -1 0 -1 1 1 0 1 2" />
// </filter>
// </svg>
const conv = document.getElementById('conv');
console.log(conv.targetX instanceof SVGAnimatedInteger);
console.log(conv.targetX.baseVal);
console.log(conv.targetX.animVal);Ankerpunkt zur Laufzeit per Schieberegler verschieben
// <input type="range" id="slider" min="0" max="2" value="1">
const conv = document.getElementById('conv');
const slider = document.getElementById('slider');
const orderX = conv.orderX.baseVal;
slider.addEventListener('input', () => {
// Wert auf den gültigen Bereich 0 … orderX - 1 begrenzen
const value = Math.min(Math.max(Number(slider.value), 0), orderX - 1);
conv.targetX.baseVal = value;
console.log(conv.getAttribute('targetX'));
});Filter dynamisch erzeugen und targetX setzen
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'motion';
const conv = document.createElementNS(SVG_NS, 'feConvolveMatrix');
conv.setAttribute('order', '5 1');
conv.setAttribute('kernelMatrix', '1 1 1 1 1');
conv.setAttribute('divisor', '5');
// Anker ganz links → Unschärfe nur nach rechts
conv.targetX.baseVal = 0;
filter.append(conv);
svg.append(filter);
document.body.append(svg);
console.log(conv.orderX.baseVal, conv.targetX.baseVal);// Wichtig · Fallstricke
- Nur lesbar heißt nicht unveränderlich:
conv.targetX = 1hat keine Wirkung (im Strict Mode wirft es einenTypeError). Setze den Wert stattdessen überconv.targetX.baseVal = 1odersetAttribute('targetX', '1'). - Gültiger Bereich: Erlaubt ist
0 ≤ targetX < orderX. Liegt der Wert außerhalb, ist das ein Fehler: Das Filter-Primitiv wird dann je nach Browser nicht oder fehlerhaft gezeichnet. Prüfe den Wert daher gegenorderX.baseVal. - Fehlendes Attribut: Beim Zeichnen gilt dann
Math.floor(orderX / 2). Der Wert, denbaseValin diesem Fall zurückgibt, kann sich aber je nach Browser davon unterscheiden. Setze das Attribut ausdrücklich, wenn du dich auf den Wert verlassen willst. - Nicht ganzzahlige Attributwerte (z. B.
\"1.5\") sind ungültig. - Browser-Kompatibilität: Die Eigenschaft wird seit Langem von allen gängigen Browsern (Chrome, Firefox, Safari, Edge) unterstützt.