Signatur
Beschreibung
Die Eigenschaft limitingConeAngle der Schnittstelle SVGFESpotLightElement spiegelt das gleichnamige SVG-Attribut des Elements <feSpotLight> wider. Das Attribut legt in Grad fest, wie weit sich der Lichtkegel eines Spotlichts um seine Hauptachse öffnen darf. Außerhalb dieses Kegels fällt kein Licht auf die beleuchtete Fläche.
Zurückgegeben wird ein SVGAnimatedNumber-Objekt. Die Eigenschaft selbst kann man nicht neu zuweisen. Den im Attribut stehenden Wert kann man aber über baseVal lesen und schreiben. animVal liefert den aktuell wirksamen Wert, also mit eventuellen SMIL-Animationen.
Gebraucht wird das vor allem bei dynamischen Lichteffekten mit <feDiffuseLighting> oder <feSpecularLighting>, etwa wenn der Kegel per Schieberegler oder Animation enger oder weiter werden soll. Ist das Attribut nicht gesetzt, gibt es keinen begrenzenden Kegel. Das Licht fällt dann nur durch specularExponent zum Rand hin ab.
Rückgabewert
baseVal (Attributwert in Grad, lesen und schreiben) und animVal (aktuell wirksamer Wert, nur lesen). Ohne gesetztes Attribut ist baseVal 0.Beispiele
Kegelwinkel auslesen
const svgNS = 'http://www.w3.org/2000/svg';
const spot = document.createElementNS(svgNS, 'feSpotLight');
spot.setAttribute('limitingConeAngle', '30');
console.log(spot.limitingConeAngle.baseVal);
console.log(spot.limitingConeAngle.animVal);Lichtkegel per Schieberegler steuern
// HTML: <input type="range" id="cone" min="5" max="90" value="20">
// SVG enthält <feSpotLight id="spot" ... limitingConeAngle="20"/>
const spot = document.getElementById('spot');
const slider = document.getElementById('cone');
slider.addEventListener('input', () => {
spot.limitingConeAngle.baseVal = Number(slider.value);
console.log(spot.getAttribute('limitingConeAngle'));
});Kompletten Spotlight-Filter aufbauen und Kegel animieren
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '200');
const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'spotFilter';
const lighting = document.createElementNS(svgNS, 'feDiffuseLighting');
lighting.setAttribute('lighting-color', 'white');
const spot = document.createElementNS(svgNS, 'feSpotLight');
Object.entries({ x: 100, y: 100, z: 150, pointsAtX: 100, pointsAtY: 100, pointsAtZ: 0, limitingConeAngle: 10 })
.forEach(([k, v]) => spot.setAttribute(k, v));
lighting.append(spot);
filter.append(lighting);
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', '200');
rect.setAttribute('height', '200');
rect.setAttribute('filter', 'url(#spotFilter)');
svg.append(filter, rect);
document.body.append(svg);
// Kegel pulsierend öffnen und schließen
const tick = (t) => {
spot.limitingConeAngle.baseVal = 10 + 20 * (1 + Math.sin(t / 500)) / 2;
requestAnimationFrame(tick);
};
requestAnimationFrame(tick);// Wichtig · Fallstricke
- Schreibgeschützt heißt nur die Referenz:
spot.limitingConeAngle = 30hat keine Wirkung. Setze stattdessenspot.limitingConeAngle.baseVal = 30oder nutzesetAttribute(). - Den Wert von
animValkann man nicht schreiben. Er weicht vonbaseValnur ab, solange eine SMIL-Animation (<animate>) läuft. - Der Wert ist ein Winkel in Grad. Negative Werte werden wie ihr Betrag behandelt. Ein fehlendes Attribut bedeutet, dass es keinen begrenzenden Kegel gibt. Das ist nicht dasselbe wie
0im Attribut, obwohlbaseValin beiden Fällen0liefert. Ob das Attribut gesetzt ist, prüfst du mithasAttribute('limitingConeAngle'). - Der Rand des Kegels wird harter oder weicher dargestellt, je nach Browser. Manche glätten ihn, andere nicht.
- Elemente musst du mit
createElementNS()im SVG-Namensraum erzeugen, sonst gibt es die Eigenschaft nicht. - Alle aktuellen Browser unterstützen die Eigenschaft. Bei vielen Filtern, die in jedem Frame animiert werden, kann die Leistung spürbar sinken.