SVGFEDiffuseLightingElement.in1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDiffuseLightingElement.in1

Beschreibung

Die Eigenschaft in1 des Interfaces SVGFEDiffuseLightingElement gibt ein SVGAnimatedString-Objekt zurück, das das in-Attribut des zugehörigen <feDiffuseLighting>-Filterprimitivs widerspiegelt. Das Attribut legt fest, welche Eingabe die diffuse Beleuchtung verarbeitet – typischerweise der Alphakanal der Quelle, der als Höhenkarte (Bump-Map) dient.

Mögliche Werte sind die Schlüsselwörter SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint oder der Name eines result-Attributs eines vorherigen Filterprimitivs im selben <filter>. Ist das Attribut nicht gesetzt, ist baseVal ein leerer String; der Filter verwendet dann das Ergebnis des vorherigen Primitivs bzw. bei erstem Primitiv SourceGraphic.

Die Eigenschaft selbst ist schreibgeschützt – das zurückgegebene Objekt lässt sich nicht ersetzen. Über in1.baseVal kann der Wert jedoch gelesen und geschrieben werden, was dem Setzen des in-Attributs entspricht. in1.animVal liefert den aktuellen (ggf. animierten) Wert. Der Name in1 statt in wurde gewählt, weil in ein reserviertes Schlüsselwort in JavaScript ist.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Objekt mit baseVal (beschreibbarer Attributwert als string) und animVal (aktueller, ggf. animierter Wert, schreibgeschützt).

Beispiele

Eingabe des Beleuchtungsfilters auslesen

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="licht">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <feDiffuseLighting id="diffus" in="blur" surfaceScale="5" lighting-color="white">
      <fePointLight x="50" y="50" z="80"/>
    </feDiffuseLighting>
  </filter>
  <circle cx="100" cy="100" r="60" fill="tomato" filter="url(#licht)"/>
</svg>`;
document.body.insertAdjacentHTML('beforeend', svg);

const diffus = document.getElementById('diffus');
console.log(diffus.in1.baseVal);
console.log(diffus.in1.animVal);

blur blur

Eingabe zur Laufzeit umschalten

const diffus = document.getElementById('diffus');

// Statt der weichgezeichneten Version direkt den Alphakanal verwenden
diffus.in1.baseVal = 'SourceAlpha';

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

SourceAlpha

Fehlendes in-Attribut erkennen

const ns = 'http://www.w3.org/2000/svg';
const el = document.createElementNS(ns, 'feDiffuseLighting');

const eingabe = el.in1.baseVal || '(vorheriges Primitiv / SourceGraphic)';
console.log(`Eingabe: ${eingabe}`);

Eingabe: (vorheriges Primitiv / SourceGraphic)

// Wichtig · Fallstricke

in1 selbst ist schreibgeschützt: el.in1 = 'SourceAlpha' hat keine Wirkung (im Strict Mode ggf. TypeError). Immer el.in1.baseVal setzen oder setAttribute('in', …) verwenden.
Verweist der Wert auf einen nicht existierenden result-Namen, behandeln Browser das wie eine fehlende Angabe bzw. ein transparentes Bild – es gibt keine Fehlermeldung.
BackgroundImage und BackgroundAlpha werden von den meisten Browsern nicht unterstützt.
SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst existiert in1 nicht.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFEDiffuseLightingElement SVGAnimatedString SVGFEDiffuseLightingElement.surfaceScale SVGFEDiffuseLightingElement.diffuseConstant SVGFESpecularLightingElement.in1 PerformanceTiming.loadEventEnd