Das Element feImage
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Viele Filter-Elemente erwarten mehr als ein Input-Bild. In diesen Fällen ist es natürlich nicht immer möglich oder sinnvoll dieses Bild aus dem gleichen Objekt zu erzeugen, auf das der Filter angewendet wird. Dies gilt bspw. für den Filter <feBlend>. Das Filter-Element <feImage> bietet eine Möglichkeit, auch ein beliebiges Element der SVG-Datei zu referenzieren und ihn dann mit dem result-Attribut anderen Filter-Elementen zur Verfügung zu stellen. Es verfügt dazu über ein einziges Attribut, xlink:href, mit dem Sie das entsprechende Objekt referenzieren können. Das kann eine externe Datei, wie eine GIF- oder JPG-Grafik, sein aber auch ein benanntes Element innerhalb der SVG-Datei. Das folgende Beispiel zeigt dies.
Hinweis:
Beachten Sie, dass die im <feImage> integrierte Grafik an die Größe des Elements angepasst wird, auf das Sie das Filter-Element anwenden.
Der erste Filter verwendet ein externes GIF-Bild, das schon im Beispiel zu den Füllmustern genutzt wurde. Dieses wird mit Hilfe des <feBlend>-Elements mit dem Rechteck überblendet. Im zweiten Filter wird ein SVG-Zeichnungselement verwendet. Allerdings sollte dieses Element auch im <defs>-Abschnitt definiert werden, damit es ansonsten nicht sichtbar ist.
Hinweis:
Sie können natürlich auch jedes andere Objekt referenzieren. Wenn dieses jedoch vergrößert oder positioniert wird, indem das transform-Attribut verwendet wird, und auch das Element ein transform-Attribut benutzt, auf das Sie den Filter anwenden, kann das zu unerwünschten Ergebnissen führen, weil das mit <feImage> referenzierte Bild dann zweimal transformiert wird. Eine solche Situation liegt auch im Beispiel vor. Daher wird hier das Objekt ohne das transform-Attribut im <defs>-Tag definiert und mit dem id-Attribut benannt.
Der zweite Filter wird dann auf den roten Button, der erste auf das Rechteck mit dem Schriftzug angewendet.
<defs>
<g id="Bttn" >
<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>
<filter id="externesBild" >
<feImage xlink:href="kaefer.gif" result="kaefer"/>
<feBlend in2="SourceGraphic" in="kaefer" mode="darken"/>
</filter>
<filter id="SVGObjekt" filterUnits="userSpaceOnUse" width="150" heigth="150">
<feGaussianBlur in="SourceAlpha" stdDeviation="12 6" result="Schatten"/>
<feImage xlink:href="#Bttn" result="Button"/>
<feComposite in="Button" in2="Schatten" />
</filter>
<desc>Es folgen die Farbverläufe</desc>
...
</defs>
<g transform="translate(0,0)">
<g transform="translate(20,20), scale(0.7)" style="filter:url(#SVGObjekt)">
<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)" style="filter:url(#externesBild)">
<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>
Bei Angabe des zu referenzierenden Elements im xlink:href-Attribut sind unterschiedliche Verfahren notwendig. Verwenden Sie eine externe Grafik, geben Sie einfach den Namen der Grafik an, bspw. mit xlink:href="kaefer.gif". Möchten Sie hingegen ein Element innerhalb einer SVG-Grafik benutzen, müssen Sie dessen Namen angeben, den Sie mit dem id-Attribut definiert haben, und vor den Namen ein # setzen.
Hinweis:
Das # hat in SVG-Grafiken eine ähnliche Bedeutung wie in HTML, wo es dazu verwendet wird, den Namen eines Ankers einzuleiten. In Referenzen auf SVG-Elemente innerhalb der Datei haben diese in etwa auch die gleiche Funktion wie ein Anker in HTML.
Abbildung: Das Ergebnis der feImage-Filter.
Hinweis:
Batik 1.0 unterstützt offenbar das <feImage>-Element nicht. Filter, die dieses Element enthalten, werden nicht angewendet und führen zu einem Platzhalter, der immer angezeigt wird, wenn ein nicht unterstütztes Element verwendet wird. Sie können in den meisten Fällen aber <feComposite> verwenden, um das gleiche Ergebnis zu erhalten. Das funktioniert dann auch in Batik.
Hinweis:
Entgegen der SVG-Spezifikation vom 20.11.2000 wird die entgültige SVG 1.0 Spezifikation für den <feImage>-Filter kein transform-Attribut mehr unterstützen. Sie sollten daher auf das transform-Attribut verzichten, auch wenn es von den aktuellen SVG-Viewer ausgeführt wird.
| << 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