Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.21 feTile

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>
      



index  |  Kapitel 14  |  14.20  <<  | 14.21 |  >>  14.22   feTurbulence