SVGFEOffsetElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEOffsetElement.y

Beschreibung

Die Eigenschaft y des Interfaces SVGFEOffsetElement gibt das y-Attribut eines <feOffset>-Filterprimitivs als SVGAnimatedLength-Objekt zurück. Zusammen mit x, width und height legt sie den Teilbereich (Primitive Subregion) fest, in dem das Ergebnis des Filterprimitivs berechnet und abgeschnitten wird.

Wichtig: y ist nicht die vertikale Verschiebung. Die tatsächliche Verschiebung des Eingabebilds steuert das Attribut dy (bzw. die Eigenschaft SVGFEOffsetElement.dy). y gibt lediglich an, wo der Ausgabebereich des Primitivs beginnt.

Die Eigenschaft selbst ist schreibgeschützt, das zurückgegebene Objekt aber nicht: Über y.baseVal (ein SVGLength) lässt sich der Wert lesen und ändern, über y.animVal erhält man den aktuell animierten Wert (schreibgeschützt). Ist das Attribut nicht gesetzt, gilt als Standardwert 0% des Filterbereichs, was bei primitiveUnits="userSpaceOnUse" relativ zum Filterbereich ausgewertet wird.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt mit baseVal (änderbarer Basiswert als SVGLength) und animVal (aktueller, ggf. animierter Wert, schreibgeschützt).

Beispiele

y-Wert eines feOffset-Elements auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="schatten">
//     <feOffset id="versatz" in="SourceAlpha" dx="5" dy="5" y="10" />
//   </filter>
// </svg>
const offset = document.getElementById('versatz');

console.log(offset.y instanceof SVGAnimatedLength);
console.log(offset.y.baseVal.value);
console.log(offset.y.animVal.value);

true 10 10

y-Position per Skript ändern

const offset = document.querySelector('feOffset');

// Basiswert direkt in Benutzereinheiten setzen
offset.y.baseVal.value = 25;
console.log(offset.getAttribute('y'));

// Wert mit expliziter Einheit (Prozent) setzen
offset.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 20);
console.log(offset.getAttribute('y'));

25 20%

Unterschied zwischen y und dy verdeutlichen

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

const offset = document.createElementNS(svgNS, 'feOffset');
offset.setAttribute('in', 'SourceGraphic');
offset.setAttribute('dy', '8');   // eigentliche vertikale Verschiebung
offset.setAttribute('y', '0');    // Beginn des Ausgabebereichs

filter.append(offset);
document.querySelector('svg').append(filter);

console.log('Verschiebung:', offset.dy.baseVal);
console.log('Bereichsbeginn:', offset.y.baseVal.value);

Verschiebung: 8 Bereichsbeginn: 0

// Wichtig · Fallstricke

Verwechslungsgefahr: y verschiebt das Bild nicht. Für die vertikale Verschiebung ist dy zuständig (SVGAnimatedNumber, kein SVGAnimatedLength).
Die Eigenschaft selbst kann nicht neu zugewiesen werden (offset.y = 5 bleibt wirkungslos bzw. wirft im Strict Mode einen TypeError). Änderungen immer über y.baseVal oder setAttribute('y', …).
Ein zu klein gewählter Teilbereich (y/height) schneidet das verschobene Ergebnis ab – typische Ursache für „abgeschnittene“ Schatten.
Die Interpretation von Prozent- und Zahlenwerten hängt vom Attribut primitiveUnits des umgebenden <filter> ab.
In allen modernen Browsern unterstützt; animVal spiegelt SMIL-Animationen wider, nicht jedoch CSS-Animationen.

Siehe auch

SVGFEOffsetElement SVGFEOffsetElement.x SVGFEOffsetElement.dy SVGFEOffsetElement.height SVGAnimatedLength SVGLength TrustedTypePolicy.name