SVGFEDiffuseLightingElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDiffuseLightingElement.y

Beschreibung

Die Eigenschaft y des Interfaces SVGFEDiffuseLightingElement steht für das Attribut y des SVG-Elements <feDiffuseLighting>. Sie gibt an, wo der Teilbereich des Filterprimitivs (filter primitive subregion) vertikal beginnt, also dessen obere Kante. Ist das Attribut nicht gesetzt, gilt der Standardwert 0% der Filterregion.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, das Objekt aber nicht: Über y.baseVal (ein SVGLength) liest und ändert man den im Attribut gesetzten Grundwert. y.animVal liefert den aktuellen, gegebenenfalls durch SMIL-Animationen (<animate>) veränderten Wert und ist nur lesbar.

Wie der Wert zu verstehen ist, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab. Bei userSpaceOnUse (Standard) gelten Benutzerkoordinaten. Bei objectBoundingBox sind es Anteile des Begrenzungsrahmens des gefilterten Elements, etwa 0.25 für 25 %. Die Eigenschaft ist praktisch, wenn man den Lichteffekt per Skript auf einen bestimmten Bereich begrenzen oder diesen Bereich animieren will.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (SVGLength, beschreibbar) und animVal (SVGLength, nur lesbar) für die vertikale Startkoordinate des Filterprimitivs.

Beispiele

y-Koordinate auslesen

// HTML:
// <svg width="200" height="200">
//   <filter id="licht">
//     <feDiffuseLighting id="diffus" y="20" lighting-color="white">
//       <fePointLight x="50" y="50" z="30" />
//     </feDiffuseLighting>
//   </filter>
//   <rect width="200" height="200" filter="url(#licht)" />
// </svg>

const fe = document.getElementById('diffus');
console.log(fe.y.baseVal.value);        // Wert in Benutzereinheiten
console.log(fe.y.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

20 true

Beleuchteten Bereich per Skript verschieben

const fe = document.querySelector('feDiffuseLighting');

// Nicht erlaubt: fe.y = 50;  (Eigenschaft ist schreibgeschützt)
// Richtig: den Grundwert über baseVal ändern
fe.y.baseVal.value = 50;
console.log(fe.getAttribute('y'));

// Mit Einheit setzen, z. B. Prozent der Filterregion
fe.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(fe.getAttribute('y'));

50 25%

Grundwert und animierten Wert vergleichen

const fe = document.querySelector('feDiffuseLighting');

// SMIL-Animation auf das y-Attribut hinzufügen
const anim = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
anim.setAttribute('attributeName', 'y');
anim.setAttribute('from', '0');
anim.setAttribute('to', '100');
anim.setAttribute('dur', '2s');
anim.setAttribute('repeatCount', 'indefinite');
fe.append(anim);

setTimeout(() => {
  console.log('baseVal:', fe.y.baseVal.value);
  console.log('animVal:', fe.y.animVal.value.toFixed(1));
}, 1000);

baseVal: 0 animVal: 50.0 (ungefähr, je nach Zeitpunkt)

// Wichtig · Fallstricke

Schreibgeschützt: Eine direkte Zuweisung wie el.y = 10 hat keine Wirkung und löst im Strict Mode einen TypeError aus. Werte ändert man über el.y.baseVal oder mit setAttribute('y', …).
Einheiten: baseVal.value liefert immer Benutzereinheiten. Bei Prozentangaben braucht die Umrechnung einen Kontext, der fehlt, solange das Element nicht im gerenderten Dokument steckt. Den ursprünglich angegebenen Wert erhält man über valueInSpecifiedUnits.
primitiveUnits: Bei objectBoundingBox sind die Werte Anteile (z. B. 0.1), keine Pixel. Das wird leicht übersehen.
Nur Teilbereich: y beschneidet lediglich die Ausgabe des Primitivs. Die Position der Lichtquelle (fePointLight, feSpotLight) ändert es nicht, denn diese hat eigene x/y/z-Attribute.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. animVal ändert sich nur bei SMIL-Animationen, nicht bei CSS-Animationen.

Siehe auch

SVGFEDiffuseLightingElement.x SVGFEDiffuseLightingElement.width SVGFEDiffuseLightingElement.height SVGFEDiffuseLightingElement SVGAnimatedLength SVGLength