SVGFEImageElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEImageElement.y

Beschreibung

Die Eigenschaft y der Schnittstelle SVGFEImageElement spiegelt das Attribut y des SVG-Elements <feImage> wider. Sie legt die obere Kante des Filterprimitiv-Teilbereichs fest, also des Rechtecks, in das das eingebundene Bild bei der Filterberechnung gezeichnet wird.

Die Eigenschaft selbst ist nur lesbar. Sie gibt aber ein SVGAnimatedLength-Objekt zurück. Dessen Unterobjekt baseVal (ein SVGLength) lässt sich ändern. Über animVal liest du den Wert, der gerade gilt, auch während einer SMIL-Animation. So kannst du die Position eines Filterbildes per JavaScript verschieben, ohne mit Attribut-Strings zu arbeiten.

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 des Begrenzungsrahmens des gefilterten Elements (z. B. 0.25 = 25 %). Fehlt das Attribut, gilt standardmäßig 0% des Filterbereichs.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (nur lesbarer, gerade gültiger Wert, eventuell animiert).

Beispiele

y-Wert eines feImage-Elements auslesen

// HTML: <svg><filter id="f"><feImage id="img" href="logo.png" x="10" y="20" width="100" height="50"/></filter></svg>
const feImage = document.getElementById('img');

console.log(feImage.y.baseVal.value);          // Zahl in Benutzereinheiten
console.log(feImage.y.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);
console.log(feImage.y.animVal.value);

20 true 20

Position des Filterbildes per Schieberegler verschieben

const feImage = document.querySelector('filter#f feImage');
const slider = document.querySelector('#yRegler'); // <input type="range" min="0" max="200">

slider.addEventListener('input', () => {
  // baseVal ist änderbar, obwohl feImage.y nur lesbar ist
  feImage.y.baseVal.value = Number(slider.value);
});

Wert in Prozent setzen und umrechnen

const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
const feImage = document.createElementNS(svgNS, 'feImage');
filter.appendChild(feImage);
document.querySelector('svg').appendChild(filter);

// Einheit Prozent setzen
feImage.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(feImage.getAttribute('y'));
console.log(feImage.y.baseVal.valueAsString);

25% 25%

// Wichtig · Fallstricke

Nur lesbar: feImage.y = 50 wirkt nicht. Im strikten Modus wird ein TypeError geworfen. Ändere stattdessen feImage.y.baseVal.value oder nutze setAttribute('y', ...).
animVal ist nur lesbar: Wer auf animVal schreibt, löst eine NoModificationAllowedError-Ausnahme aus.
Einheiten: Bei primitiveUnits="objectBoundingBox" liefert baseVal.value Anteile (0–1) und keine Pixel. Bei Prozentwerten hängt value vom Bezugsrahmen ab und kann im nicht gerenderten Zustand ungenau sein.
Kein Attribut gesetzt: Liegt kein y-Attribut vor, liefert baseVal 0, wirksam ist aber 0% des Filterbereichs.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Da <feImage> externe Bilder laden kann, gelten für fremde Quellen CORS- und CSP-Regeln (img-src).

Siehe auch

SVGFEImageElement SVGFEImageElement.x SVGFEImageElement.width SVGFEImageElement.height SVGAnimatedLength SVGLength HTMLImageElement.y