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

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.20 feImage

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>
      



index  |  Kapitel 14  |  14.19  <<  | 14.20 |  >>  14.21   feTile