|
Der primitive Filter feImage
bietet die Möglichkeit eine externe Bitmap-Grafik oder
ein svg-Fragment als Input-Bild für
nachfolgende primitive Filter einzubinden.
feImage füllt die Filterregion dieses
primitiven Filters durch eine referenzierte
Grafik.
Statt des Attributs in verwendet dieser primitive
Filter das Attribut xlink:href um ein Input-Bild festzulegen.
Das Input-Bild wird durch feImage auf die Größe
des Filters bzw. des referenzierenden Elements skaliert. Das Resultat der Skalierung
ist das Output-Bild dieses Filters.
Gültiger Wert für xlink:href ist eine
URL, die entweder auf eine Grafik im
Format JPG, PNG oder SVG oder auf ein beliebiges SVG Fragment zeigt.
Es ist sinnvoll feImage in Verbindung mit anderen primitiven
Filtern einzusetzen.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="380px" height="370px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Der primitive Filter feImage</title>
<desc>
Beispiele für die Verwendung von feImage
</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:16px;
font-weight:bold;}
]]>
</style>
<symbol id="smilie">
<desc>ein lachendes Smilie</desc>
<circle id="gesicht" cx="20" cy="20" r="15"
fill="yellow" stroke="black" />
<circle id="auge-links" cx="15" cy="15" r="2"
fill="black" stroke="black" />
<circle id="auge-rechts" cx="25" cy="15" r="2"
fill="black" stroke="black" />
<line id="nase" x1="20" y1="18" x2="20" y2="23"
stroke="black" stroke-width="2" />
<path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
stroke="black" fill="none" stroke-width="2" />
</symbol>
<!-- 2 Filter mit feImage -->
<filter id="f1" x=".075" y=".075" width=".95" height=".95">
<feImage xlink:href="strand.jpg"
result="out1" />
</filter>
<!-- zusätzlich mit feComposite und feBlend -->
<filter id="f2">
<feImage xlink:href="strand.jpg"
result="out1" />
<feComposite in="out1" in2="SourceGraphic"
operator="in"
result="out2" />
<feBlend in="SourceGraphic" in2="out2"
mode="darken" />
</filter>
</defs>
<!-- die Instanzen des Symbols "smilie" -->
<use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
<use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
filter="url(#f1)" />
<use xlink:href="#smilie" transform="translate(150,130) scale(5.4)"
filter="url(#f2)" />
<!-- Text und Hilfslinien -->
<text x="145" y="130">feImage</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
| 
