Das Filter-Element feComposite
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Das Element <feComposite> können Sie verwenden, um mehrere Filterergebnisse miteinander zu verbinden. Dabei werden die einzelnen Pixel der beiden Bilder gemäß der gewählten Methode "addiert". Dazu stehen folgende Attribute zusätzlich zu den Universalattributen zur Verfügung:
- operator legt fest, wie die Pixel zusammengeführt werden. Dazu stehen die Werte over, in, out, atop, xor und arithmetic zur Verfügung. Wenn Sie arithmetic verwenden, wird das Ergebnis mit der Formel Ergebnis = k1*i1*i2 + k2*i1 + k3*i2 + k4 berechnet. Die Werte k1, k2, k3 und k4 stellen weitere Attribute des Tags dar, die Sie festlegen können. Mit i1 wird das Pixel des ersten Bildes und mit i2 das entsprechende Pixel des zweiten Bildes bezeichnet.
- k1, k2, k3 und k4 stellen Werte dar, die bei Auswahl von arithmetic für das Attribut operator für die Berechnung erforderlich sind. Für Attribute, die Sie nicht angeben, wird der Wert 0 verwendet.
- in2 ermöglicht die Angabe des zweiten Bildes. Dazu stehen die gleichen Möglichkeiten zur Verfügung wie für das Universalattribut in.
Die Anwendung des Elements erfordert jedoch, dass zusätzlich mindestens ein Element verfügbar ist. Dessen Ergebnis und das Originalbild oder dessen Alpha-Kanal kann dann mit dem Filter-Element <feComposite> verschmolzen werden. Das folgende Beispiel zeigt die Ergebnisse der verschiedenen Operatoren. Sie werden allerdings hier auf die übergeordneten Gruppen angewendet.
...
<defs>
<filter id="arithmetic">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="Schatten"/>
<feComposite in="SourceGraphic" in2="Schatten" operator="in"/>
</filter>
<filter id="out">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="Schatten"/>
<feOffset dx="+3" dy="+3" in="Schatten" result="Schatten"/>
<feComposite in="SourceGraphic" in2="Schatten" operator="out"/>
</filter>
<filter id="atop">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="Schatten"/>
<feOffset dx="+3" dy="+3" in="Schatten" result="Schatten"/>
<feComposite in="SourceGraphic" in2="Schatten" operator="atop" />
</filter>
<filter id="xor">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="Schatten"/>
<feOffset dx="+3" dy="+3" in="Schatten" result="Schatten"/>
<feComposite in="SourceGraphic" in2="Schatten" operator="xor" />
</filter>
<desc>Es folgen die Farbverläufe</desc>
...
</defs>
<g transform="translate(0,0)" style="filter:url(#arithmetic)">
<g transform="translate(20,20), scale(0.7)" >
<desc>Der Button</desc>
<circle cx="25" cy="25" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);fill-opacity:1;opacity:1;fill:url(#runderVerlauf)"/>
<ellipse cx="25" cy="15" rx="20" ry="12" style="stroke-width:1;stroke:none;fill-opacity:1;opacity:1;fill:url(#linearerVerlauf)"/>
</g>
<g transform="translate(120,20)">
<desc>Der Text mit Rechteck</desc>
<rect x="0" y="0" width="150" height="75" style="fill:red;stroke:black;stroke-width:1"/>
<text id="iText" x="20" y="55" style="fill-opacity:1;font-family:'Arial Black';font-size:46;stroke:black;fill:yellow">SVG</text>
</g>
</g>
...
Abbildung: Das Ergebnis des Filters mit den Optionen arithmetic, over, in, out, atop und xor.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de