SVGFEConvolveMatrixElement.targetY — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEConvolveMatrixElement.targetY

Beschreibung

Die schreibgeschützte Eigenschaft targetY der Schnittstelle SVGFEConvolveMatrixElement gibt ein SVGAnimatedInteger-Objekt zurück, das das targetY-Attribut des zugehörigen <feConvolveMatrix>-Filterelements abbildet. Das Attribut legt fest, in welcher Zeile der Faltungsmatrix (Kernel) das Zielpixel liegt, also die vertikale Position des Pixels, auf das das Ergebnis der Faltung geschrieben wird.

Der Wert ist ein nullbasierter Zeilenindex und muss die Bedingung 0 <= targetY < orderY erfüllen. Fehlt das Attribut, verwendet der Browser standardmäßig die Mitte der Matrix: Math.floor(orderY / 2). Bei einer 3×3-Matrix ist das also 1.

Schreibgeschützt ist nur die Eigenschaft selbst, also die Referenz auf das SVGAnimatedInteger-Objekt. Über targetY.baseVal lässt sich der Grundwert lesen und schreiben. targetY.animVal enthält den aktuell wirksamen, möglicherweise durch SMIL animierten Wert und kann nur gelesen werden. Wenn man targetY verschiebt, verändert sich der Bezugspunkt des Kernels. Das eignet sich zum Beispiel für gerichtete Weichzeichner, Präge-Effekte (Emboss) oder Kantenfilter, die in eine bestimmte Richtung versetzt wirken sollen.

Rückgabewert

Typ

SVGAnimatedInteger

Beschreibung

Ein Objekt mit baseVal (Grundwert, les- und schreibbar) und animVal (aktuell wirksamer Wert, nur lesbar). Beide Werte sind ganzzahlige Zeilenindizes im Kernel.

Beispiele

targetY eines Filters auslesen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="0" height="0">
    <filter id="emboss">
      <feConvolveMatrix id="conv" order="3" targetX="1" targetY="0"
        kernelMatrix="-2 -1 0  -1 1 1  0 1 2" />
    </filter>
  </svg>`);

const conv = document.getElementById('conv');
console.log(conv.targetY instanceof SVGAnimatedInteger);
console.log('Basiswert:', conv.targetY.baseVal);
console.log('Animierter Wert:', conv.targetY.animVal);

true Basiswert: 0 Animierter Wert: 0

Standardwert ohne targetY-Attribut

const ns = 'http://www.w3.org/2000/svg';
const conv = document.createElementNS(ns, 'feConvolveMatrix');
conv.setAttribute('order', '5');

// Ohne Attribut: Math.floor(orderY / 2)
console.log(conv.hasAttribute('targetY'));
console.log(conv.targetY.baseVal);

false 2

Zielzeile per Schieberegler ändern

// HTML: <input type="range" id="row" min="0" max="2" value="1">
const conv = document.querySelector('#emboss feConvolveMatrix');
const slider = document.getElementById('row');

slider.addEventListener('input', () => {
  const orderY = conv.orderY.baseVal;
  const value = Number(slider.value);
  // Nur gültige Werte setzen: 0 <= targetY < orderY
  if (value >= 0 && value < orderY) {
    conv.targetY.baseVal = value; // aktualisiert auch das Attribut
    console.log(conv.getAttribute('targetY'));
  }
});

z. B. "2" nach dem Verschieben des Reglers

// Wichtig · Fallstricke

Keine direkte Zuweisung: conv.targetY = 2 hat keine Wirkung, im strikten Modus wird ein TypeError geworfen. Ändern Sie stattdessen conv.targetY.baseVal oder rufen Sie setAttribute('targetY', ...) auf.
Ungültige Werte: Liegt targetY außerhalb des Bereichs 0 bis orderY - 1, gilt der Filter laut Spezifikation als fehlerhaft. Das gefilterte Element wird dann in vielen Browsern gar nicht oder transparent dargestellt. Prüfen Sie den Wert deshalb vorher gegen orderY.baseVal.
Ganzzahlen: Nachkommastellen im Attribut sind ungültig. Beim Setzen über baseVal werden Werte auf eine Ganzzahl gekürzt.
Browserunterstützung: Die Eigenschaft wird von allen modernen Browsern unterstützt. Faltungsfilter sind aber rechenintensiv, besonders bei großen Matrizen (order) oder großen Filterflächen. Auf Mobilgeräten kann das die Leistung spürbar verschlechtern.

Siehe auch

SVGFEConvolveMatrixElement SVGFEConvolveMatrixElement.targetX SVGFEConvolveMatrixElement.orderY SVGFEConvolveMatrixElement.kernelMatrix SVGAnimatedInteger