SVG/Attribut/in

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das in-Attribut gibt an, welche Darstellung des gefilterten Elements beziehungweise welches Zwischenergebnis in einer Filterkette ein Filtereffekt verarbeiten soll.

Erlaubte Werte
  • Filtereffekt-Referenz - ein Name, der bei einem vorherigen Effekt des gleichen Filters über das result-Attribut festgelegt wurde. Damit verwendet der Filtereffekt dessen Ausgabe als Eingabebild.
  • SourceGraphic: (Standardwert) ganze Ausgangsgrafik
  • SourceAlpha: benutzt den Alphakanal der Ausgangsgrafik, die Werte für Rot, Grün und Blau werden auf 0 gesetzt.
  • FillPaint: verwendet die Füllung des gefilterten Elements als Eingabe (Stand 2026: nur im Firefox)
  • StrokePaint: verwendet die Umrandung des gefilterten Elements als Eingabe (Stand 2026: nur im Firefox)
  • BackgroundImage: verwendet den Hintergrund, auf dem das zu filternde SVG-Element gezeichnet würde (Stand 2026: nirgends verfügbar)
  • BackgroundAlpha: wie BackgroundImage, es wird aber nur der Alphakanal verwendet (Stand 2026: nirgends verfügbar)

Falls BackgroundImage und BackgroundAlpha einmal implementiert werden sollten, dann funktionieren sie nur unter bestimmten Voraussetzungen. SVG 1.1 verlangte, dass dafür ein Elternelement des gefilterten Elements das Attribut enable-background mit dem Wert new besitzt. Dies wurde nur im Internet Explorer implementiert, von Adobe Illustrator inflationär verwendet und ansonsten missbilligt, weil es nicht zum Konzept der Stapelkontexte passte. Die aktuelle Filtereffekt-Spezifikation verlangt das Attribut isolation="isolate". Wenn es nur darum geht, wie ein Element mit seinem Hintergrund kombiniert werden soll, kann eventuell die CSS-Eigenschaft mix-blend-mode nützlich sein.

Standardwert
anwendbar auf

SVG-Filtereffekte

Präsentationsattribut

nein

mit CSS animierbar

nein

Beispiel
<defs> <filter id="Filter"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="weichgezeichnet"/> <feSpecularLighting in="weichgezeichnet"/> surfaceScale="5" specularConstant="1" specularExponent="10" lighting-color="white" result="zwischenergebnis1"/> <fePointLight x="-50" y="-100" z="200"/> </feSpecularLighting> <feComposite in="zwischenergebnis1" in2="SourceAlpha" operator="in" result=zwischenergebnis2"/> <feComposite in="SourceGraphic" in=zwischenergebnis2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in=beleuchtet"/> <!-- Weichzeichner --> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result=weichgezeichnet1"/> <!-- Verschiebung --> <feOffset in=weichgezeichnet1" dx="3" dy="3" result="weichgezeichnetVerschoben"/> <!-- Zusammenfügen --> <feMerge> <feMergeNode in="weichgezeichnetVerschoben"/> <feMergeNode in="SourceGraphic"/> <feMergeNode in=beleuchtet"/> </feMerge> </filter> </defs>


Beachten Sie: Die Angabe eines unbekannten oder undefinierten Wertes hat je nach Browser unterschiedliche Konsequenzen. Während Chromium-Browser und Firefox unbekannte Quellen durch SourceGraphic ersetzen, wird bei Safari der gesamte Filter verworfen und die Ausgabe ist leer.

Siehe auch

Weblinks


Abgerufen am 13.01.2026
von "http://wiki.selfhtml.org/wiki/SVG/Attribut/in"