Was bedeutet <feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite>?

Question

Was bedeutet <feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite>?

Antwort

Verwandte Fragen

Was bedeutet das Attribut 'inverse' im SVG-Filter <feComposite>?

Accepted Answer

Das SVG-Element `<feComposite>` wird in SVG-Filtereffekten verwendet, um zwei Bilder (bzw. Bilddatenströme) miteinander zu kombinieren. In deinem Beispiel: ```xml <feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite> ``` bedeutet das Folgendes: - **operator="over"**: Das ist der Standard-Operator und entspricht dem klassischen „Überlagern“ (wie bei Ebenen in Photoshop). Das Bild aus `in` (hier: "shadow") wird über das Bild aus `in2` (hier: "SourceGraphic") gelegt. - **in="shadow"**: Das ist die Eingabe 1, meist das Ergebnis eines vorherigen Filter-Schritts, z.B. ein Schatten. - **in2="SourceGraphic"**: Das ist die Eingabe 2, meist das Originalbild. **Zusammengefasst:** Mit diesem Filter-Schritt wird das Bild aus dem Kanal „shadow“ über das Originalbild („SourceGraphic“) gelegt. Das ist z.B. typisch, um einen Schatteneffekt zu erzeugen, bei dem der Schatten unter dem eigentlichen Bild sichtbar ist. **Weitere Infos:** - [MDN: feComposite](https://developer.mozilla.org/de/docs/Web/SVG/Element/feComposite) - [SVG-Filter-Grundlagen](https://developer.mozilla.org/de/docs/Web/SVG/Tutorial/Filter)

Accepted Answer

Im Kontext von SVG-Filtern und speziell dem `<feComposite>`-Element bedeutet das Attribut `operator="out"` Folgendes: - **`in="SourceGraphic"`**: Das ist das Originalbild od... [mehr]

Accepted Answer

Im Kontext von SVG-Filtern und speziell dem `<feComposite>`-Element bedeutet das Attribut `operator="out"` Folgendes: - **`in="SourceGraphic"`**: Das ist das Originalbild oder die ursprüngliche Grafik. - **`in2="offset-display"`**: Das ist ein zweites Eingabebild, das z.B. durch einen vorherigen Filtereffekt (wie ein verschobener Schatten) erzeugt wurde. - **`operator="out"`**: Dieser Operator sorgt dafür, dass aus dem ersten Bild (`in`) alle Bereiche entfernt werden, die im zweiten Bild (`in2`) sichtbar sind. Es bleibt also nur der Teil von `SourceGraphic` übrig, der **nicht** von `offset-display` überlappt wird. Das Ergebnis wird im Attribut `result="inverse"` gespeichert. Das heißt, der Name "inverse" ist hier frei gewählt und bezeichnet das Filterergebnis, das du später im Filterverlauf weiterverwenden kannst. **Zusammengefasst:** `<feComposite operator="out" in="SourceGraphic" in2="offset-display" result="inverse">` bedeutet: Erzeuge ein Bild, das nur die Teile von `SourceGraphic` enthält, die **nicht** von `offset-display` überdeckt werden, und speichere dieses Ergebnis unter dem Namen "inverse". Weitere Infos findest du in der [MDN-Dokumentation zu feComposite](https://developer.mozilla.org/de/docs/Web/SVG/Element/feComposite).