SVGFESpecularLightingElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.in1

Beschreibung

Die Eigenschaft in1 der Schnittstelle SVGFESpecularLightingElement spiegelt das in-Attribut des zugehörigen <feSpecularLighting>-Filterprimitivs wider. Dieses Attribut legt fest, welche Eingabe das Primitiv verarbeitet. Das kann ein Schlüsselwort wie SourceGraphic, SourceAlpha, BackgroundImage, FillPaint oder StrokePaint sein oder der result-Name eines vorherigen Primitivs im selben Filter.

Bei Glanzlicht-Effekten dient der Alphakanal der Eingabe als Höhenkarte (engl. „bump map“). Deshalb wird in oft auf SourceAlpha oder auf das Ergebnis eines <feGaussianBlur> gesetzt, damit weiche Reliefkanten entstehen.

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Sie gibt aber ein SVGAnimatedString zurück. Dessen baseVal lässt sich lesen und schreiben, damit ändert man das Attribut per Skript. animVal liefert den aktuellen, eventuell durch SMIL animierten Wert.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (Attributwert, beschreibbar) und animVal (animierter Wert, nur lesbar). Fehlt das in-Attribut, ist baseVal ein leerer String.

Beispiele

Eingabe eines Glanzlicht-Filters auslesen

// HTML: <svg><filter id="glanz"><feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
//   <feSpecularLighting id="spec" in="blur" specularExponent="20" result="licht">
//     <fePointLight x="50" y="50" z="100"/></feSpecularLighting></filter></svg>
const spec = document.getElementById('spec');
console.log(spec.in1.baseVal);
console.log(spec.in1 instanceof SVGAnimatedString);

blur true

Eingabe per Skript umschalten

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

// Relief direkt aus dem Alphakanal statt aus dem weichgezeichneten Ergebnis
const toggleInput = () => {
  spec.in1.baseVal = spec.in1.baseVal === 'blur' ? 'SourceAlpha' : 'blur';
  console.log('Neue Eingabe:', spec.getAttribute('in'));
};

document.querySelector('#toggle').addEventListener('click', toggleInput);

Neue Eingabe: SourceAlpha

Filter vollständig per JavaScript erzeugen

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

const spec = document.createElementNS(NS, 'feSpecularLighting');
spec.in1.baseVal = 'SourceAlpha';
spec.setAttribute('specularExponent', '15');

const light = document.createElementNS(NS, 'feDistantLight');
light.setAttribute('azimuth', '45');
light.setAttribute('elevation', '60');
spec.append(light);
filter.append(spec);
document.querySelector('svg defs').append(filter);

console.log(spec.getAttribute('in'));

SourceAlpha

// Wichtig · Fallstricke

Die Eigenschaft heißt in1 und nicht in, weil in in JavaScript ein reserviertes Wort (Operator) ist.
spec.in1 = 'blur' hat keine Wirkung (im Strict Mode gibt es einen TypeError). Schreiben Sie stattdessen in in1.baseVal oder nutzen Sie setAttribute('in', …).
Verweist in auf einen unbekannten result-Namen, nimmt der Browser beim ersten Primitiv SourceGraphic und sonst das Ergebnis des vorherigen Primitivs.
BackgroundImage, FillPaint und StrokePaint werden in den meisten Browsern kaum oder gar nicht unterstützt.
Die Eigenschaft selbst wird in allen modernen Browsern unterstützt.

Siehe auch

SVGFESpecularLightingElement SVGAnimatedString SVGFESpecularLightingElement.result SVGFEDiffuseLightingElement.in1 SVGFEGaussianBlurElement