SVGFESpecularLightingElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.y

Beschreibung

Die Eigenschaft y des Interface SVGFESpecularLightingElement gibt das y-Attribut des Elements <feSpecularLighting> zurück. Sie gehört zu den Filterprimitiv-Attributen (x, y, width, height). Diese Attribute legen den Teilbereich (filter primitive subregion) fest, in dem das Ergebnis der Glanzlicht-Berechnung erzeugt und abgeschnitten wird.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt mit zwei Eigenschaften: baseVal ist der statische, im Markup oder per Skript gesetzte Wert. animVal ist der aktuelle, gegebenenfalls durch SMIL-Animation veränderte Wert und kann nur gelesen werden. Beide sind SVGLength-Objekte, deren value (in Benutzereinheiten), valueInSpecifiedUnits und unitType du auswerten kannst.

Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen. Den Wert änderst du über y.baseVal.value, y.baseVal.newValueSpecifiedUnits() oder direkt mit setAttribute('y', …). Fehlt das Attribut, gilt standardmäßig 0% des Filterbereichs. Wie der Wert gedeutet wird, hängt vom Attribut primitiveUnits des übergeordneten <filter> ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (jeweils vom Typ SVGLength), das die vertikale Koordinate des Filterprimitiv-Teilbereichs beschreibt.

Beispiele

y-Wert eines vorhandenen feSpecularLighting auslesen

// Markup:
// <svg width="200" height="200">
//   <filter id="glanz">
//     <feSpecularLighting id="spec" x="0" y="20" width="200" height="160"
//       specularExponent="20" lighting-color="#fff">
//       <fePointLight x="50" y="50" z="100" />
//     </feSpecularLighting>
//   </filter>
// </svg>
const spec = document.getElementById('spec');
console.log(spec.y instanceof SVGAnimatedLength);
console.log(spec.y.baseVal.value);
console.log(spec.y.animVal.value);

true 20 20

Position per Skript ändern

const spec = document.querySelector('feSpecularLighting');

// Wert in Benutzereinheiten setzen
spec.y.baseVal.value = 40;
console.log(spec.getAttribute('y'));

// Wert in Prozent setzen
spec.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(spec.getAttribute('y'));

40 10%

Element dynamisch erzeugen und y prüfen

const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
const spec = document.createElementNS(SVG_NS, 'feSpecularLighting');
filter.append(spec);

// Ohne Attribut: Standardwert 0 %
console.log(spec.y.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(spec.y.baseVal.valueInSpecifiedUnits);

spec.setAttribute('y', '15');
console.log(spec.y.baseVal.value);

true 0 15

// Wichtig · Fallstricke

Schreibgeschützt: spec.y = … ist wirkungslos und löst im Strict Mode einen TypeError aus. Ändere stattdessen spec.y.baseVal.
animVal ist immer schreibgeschützt. Ein Schreibversuch löst einen NoModificationAllowedError aus.
Nicht verwechseln mit dem y-Attribut der Lichtquelle (<fePointLight>, <feSpotLight>). Das ist ein SVGAnimatedNumber und gibt die Position des Lichts an, nicht den Filter-Teilbereich.
Prozentwerte und primitiveUnits=\"objectBoundingBox\" beziehen sich auf den Filterbereich bzw. die Bounding Box. baseVal.value kann deshalb bei nicht gerendertem Element oder bei relativen Einheiten unerwartete Werte liefern.
Wird von allen modernen Browsern unterstützt. Einige ältere Browser brauchten beim Filter-Neurendern nach Änderungen an Teilbereichen zusätzliche Aufmerksamkeit.

Siehe auch

SVGFESpecularLightingElement SVGFESpecularLightingElement.x SVGFESpecularLightingElement.width SVGFESpecularLightingElement.height SVGAnimatedLength SVGLength