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

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.19 feFlood

Der primitive Filter feFlood füllt das Zielrechteck mit Farbe. Benötigt dabei kein Input-Bild.

Die Farbangabe nimmt dabei das Attribut flood-color entgegen. Es akzeptiert aber ebenfalls Referenzen auf Verläufe oder Muster als Wert. Voreingestellter Wert ist black.

Um für die gewählte Farbe eine Transparenz festzulegen, können Sie vom Attribut flood-opacity Gebrauch machen. Wie alle anderen SVG Attribute zur Einstellung von Transparenz, akzeptiert auch flood-opacity eine Zahl zwischen 0 und 1 als Wert. Voreingestellter Wert ist 1.

Es ist sinnvoll feFlood in Verbindung mit anderen primitiven Filtern einzusetzen, da feFlood lediglich den Canvas des referenzierenden Elements mit der angegebenen Farbe und Durchsichtigkeit füllt.

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 feFlood</title>
  <desc>
    Beispiele für die Verwendung von feFlood
  </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 feFlood -->
    <filter id="f1">
      <feFlood flood-color="limegreen" />
    </filter>
    <filter id="f2">
      <feFlood flood-color="limegreen" flood-opacity=".5" />
    </filter>
<!-- zusätzlich mit feComposite -->
    <filter id="f3">
      <feFlood flood-color="limegreen"
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="over" />
    </filter>
    <filter id="f4">
      <feFlood flood-color="limegreen"
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="arithmetic"
        k1="0" k2="1" k3="1" k4="0" />
    </filter>
    <filter id="f5">
      <feFlood flood-color="limegreen"
        result="out1" />
      <feComposite in="out1" in2="SourceGraphic"
        operator="in" />
    </filter>
<!-- zusätzlich mit feComposite und feBlend -->
    <filter id="f6">
      <feFlood flood-color="limegreen"
        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(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">feFlood</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      



index  |  Kapitel 14  |  14.18  <<  | 14.19 |  >>  14.20   feImage