SVGFEComponentTransferElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEComponentTransferElement.y

Beschreibung

Die schreibgeschützte Eigenschaft y der Schnittstelle SVGFEComponentTransferElement steht für das SVG-Attribut y des Elements <feComponentTransfer>. Zusammen mit x, width und height legt es den Teilbereich fest, in dem das Filterprimitiv sein Ergebnis berechnet und ausgibt.

Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedLength-Objekt. Dessen Eigenschaft baseVal enthält den im Markup gesetzten Wert, animVal den aktuellen Wert, der durch SMIL-Animationen verändert sein kann. Beide sind SVGLength-Objekte mit value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.

Wie der Wert gedeutet wird, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab. Bei userSpaceOnUse (Standard) gilt er im Benutzerkoordinatensystem. Bei objectBoundingBox ist er ein Bruchteil bzw. Prozentsatz der Begrenzungsbox des gefilterten Elements. Fehlt das Attribut, beträgt der Standardwert 0% relativ zum Filterbereich.

Die Eigenschaft ist nützlich, wenn du einen Filtereffekt per Skript nur auf einen Teil der Grafik anwenden willst, zum Beispiel bei einer Farbkorrektur, die von oben nach unten „einfährt“.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (statischer Wert) und animVal (animierter Wert, nur lesbar), jeweils vom Typ SVGLength. Es beschreibt die vertikale Koordinate des Teilbereichs des Filterprimitivs.

Beispiele

y-Wert eines feComponentTransfer auslesen

// Markup:
// <svg width="200" height="200">
//   <filter id="f" x="0" y="0" width="1" height="1">
//     <feComponentTransfer id="ct" y="40" height="100">
//       <feFuncR type="linear" slope="2" />
//     </feComponentTransfer>
//   </filter>
//   <image href="foto.jpg" width="200" height="200" filter="url(#f)" />
// </svg>

const ct = document.getElementById('ct');
const { baseVal, animVal } = ct.y;
console.log(baseVal.value);        // Wert in Benutzereinheiten
console.log(baseVal.valueAsString); // Original-Schreibweise
console.log(animVal.value);

40 40 40

Filterbereich per Skript verschieben

const ct = document.querySelector('feComponentTransfer');

// Direkt in Benutzereinheiten setzen
ct.y.baseVal.value = 80;

// Oder mit Einheit (Prozent) setzen
ct.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);

console.log(ct.getAttribute('y'));

25%

Farbkorrektur von oben nach unten einblenden

const ct = document.querySelector('#ct');
const svgHeight = 200;
let pos = 0;

const step = () => {
  pos += 2;
  // Bereich schrumpft von oben: y wandert nach unten
  ct.y.baseVal.value = svgHeight - pos;
  ct.height.baseVal.value = pos;
  if (pos < svgHeight) requestAnimationFrame(step);
};
requestAnimationFrame(step);

// Wichtig · Fallstricke

Nur lesbar: ct.y = 10 hat keine Wirkung und wirft im strikten Modus einen TypeError. Ändere stattdessen ct.y.baseVal.value oder nutze setAttribute('y', …).
animVal ist immer schreibgeschützt. Schreibversuche darauf lösen eine NoModificationAllowedError-Ausnahme aus.
Bei primitiveUnits="objectBoundingBox" wird ein Wert wie 0.2 als 20 % der Begrenzungsbox gedeutet. baseVal.value liefert dann nicht die Pixelposition.
Prozentangaben beziehen sich auf die Höhe des Bezugssystems. Das Umrechnen in value kann einen Darstellungskontext erfordern. Bei nicht gerenderten Elementen können die Werte ungenau sein.
Der Teilbereich wird zusätzlich auf den Filterbereich des <filter>-Elements beschnitten. Werte außerhalb davon wirken also nicht.
Kompatibilität: wird von allen modernen Browsern unterstützt, im Internet Explorer ab Version 10.

Siehe auch

SVGFEComponentTransferElement SVGFEComponentTransferElement.x SVGFEComponentTransferElement.width SVGFEComponentTransferElement.height SVGAnimatedLength SVGLength SVGFilterElement