|
Der primitive Filter feTile
füllt das Zielrechteck mit einem Muster. Als Muster wird das Input-Bild
verwendet.
Damit das Input-Bild von feTile überhaupt
als Muster verwendet werden kann, muß es kleiner sein als
das Zielrechteck, d.h der Canvas des referenzierenden Elements.
Aus diesem Grund ist das entsprechende Input-Bild
meist das Output-Bild eines vorangegangenen primitiven Filters, der
durch die Attribute x, y,
width und height in
seinen Ausmassen beschränkt ist.
In den Filtern des folgenden Beispiels wird der, in seinen Ausmassen beschränkte
primitive Filter
feGaussianBlur vorangestellt, um ein Input-Bild für
feTile zu erzeugen. Damit
feGaussianBlur ansonsten keinen Effekt zeigt, wird
seinem Attribut stdDeviation in einigen Filtern
der Wert 0 zugeordnet.
Es ist daher besonders sinnvoll feTile 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 feTile</title>
<desc>
Beispiele für die Verwendung von feTile
</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>
<!-- 6 Filter mit feTile
und feGaussianBlur ohne Weichzeichnung -->
<filter id="f1">
<feGaussianBlur in="SourceGraphic"
x="0" y="0" width="20" height="20"
stdDeviation="0"
result="out1" />
<feTile in="out1"
result="out2" />
</filter>
<filter id="f2">
<feGaussianBlur in="SourceGraphic"
x="20" y="0" width="20" height="20"
stdDeviation="0"
result="out1" />
<feTile in="out1"
result="out2" />
</filter>
<filter id="f3">
<feGaussianBlur in="SourceGraphic"
x="11" y="6" width="18" height="28"
stdDeviation=".5"
result="out1" />
<feTile in="out1"
result="out2" />
</filter>
<filter id="f4">
<feGaussianBlur in="SourceGraphic"
x="6" y="11" width="28" height="18"
stdDeviation=".5"
result="out1" />
<feTile in="out1"
result="out2" />
</filter>
<filter id="f5">
<feGaussianBlur in="SourceGraphic"
x="16" y="16" width="8" height="8"
stdDeviation="0"
result="out1" />
<feTile in="out1"
result="out2" />
</filter>
<!-- zusätzlich mit feGaussianBlur, feOffset,
feSpecularLighting, feComposite,
und feMerge inclusiv Kind-Elemente -->
<filter id="f6">
<feGaussianBlur in="SourceGraphic"
x="16" y="16" width="8" height="8"
stdDeviation="2"
result="out1" />
<feTile in="out1"
result="out2" />
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out3" />
<feOffset in="out3"
dx="2" dy="2"
result="out4" />
<feSpecularLighting in="out3"
surfaceScale="2"
specularExponent="16"
result="out5">
<feSpotLight x="-100" y="-100" z="100" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="out5"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"
result="out6" />
<feMerge>
<feMergeNode in="out2" />
<feMergeNode in="out4" />
<feMergeNode in="out6" />
</feMerge>
</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(250,10) scale(2.7)"
filter="url(#f2)" />
<use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
filter="url(#f3)" />
<use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
filter="url(#f4)" />
<use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
filter="url(#f5)" />
<use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
filter="url(#f6)" />
<!-- Text und Hilfslinien -->
<text x="145" y="130">feTile</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
|
