SVG/Element/feFlood

Das feFlood-Element ermöglicht es Ihnen, eine Grafik teiltransparent mit Farbe füllen.

Syntax

Start-Tag: notwendig

End-Tag: verboten

Elternelemente

Darf vorkommen in:
filter

erlaubte Inhalte

keine

Attribute

Name	Inhalt	Standardwert	Bedeutung
flood-color	CDATA	schwarz	Farbangabe
flood-opacity	NUMBER	1	Deckkraft

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

<filter id="f3" width="100%" height="100%">
    <feFlood flood-color="skyblue" 
             flood-opacity=".5" 
             result="out1"
     />
    <feComposite in="SourceGraphic" in2="out1"
           operator="over" />
</filter>

Siehe auch

• SVG/Tutorials/Filter

Weblinks

• W3C (Spezifikation): feFlood feFlood
• apike.ca: feFlood
• wikibooks.de: Urfilter feFlood

Live-Beispiel

Beispiel ansehen …

 <defs>	
    <filter id="f1" width="100%" height="100%" >
      <feFlood flood-color="skyblue"  />
    </filter>
    <filter id="f2" width="100%" height="100%">
      <feFlood flood-color="skyblue" flood-opacity=".5" />
    </filter>

    <!-- zusätzlich mit feComposite -->
    <filter id="f3" width="100%" height="100%">
      <feFlood flood-color="skyblue" 
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="over" />
    </filter>
    <filter id="f4" width="100%" height="100%">
      <feFlood flood-color="skyblue" 
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="arithmetic"
        k1="0" k2="1" k3="1" k4="0" />
    </filter>
	
    <filter id="f5" width="100%" height="100%">
      <feFlood flood-color="skyblue" 
        result="out1" />
      <feComposite in="out1" in2="SourceGraphic"
        operator="in" />
    </filter>

    <!-- zusätzlich mit feComposite und feBlend -->
    <filter id="f6" width="100%" height="100%">
      <feFlood flood-color="skyblue" 
        result="out1" />
      <feComposite in="out1" in2="SourceGraphic"
        operator="in"
        result="out2" />
      <feBlend in="SourceGraphic" in2="out2"
        mode="darken" />
    </filter>
	<filter id="f7" width="100%" height="100%">
      <feFlood flood-color="sykblue" 
        result="out1" />
      <feComposite in="out1" in2="SourceGraphic"
        operator="in"
        result="out2" />
      <feBlend in="SourceGraphic" in2="out2"
        mode="multiply" />
    </filter>
    <symbol id="bild" >
	  <image x="0" y="0" width="200px" height="200px"
         xlink:href="http://wiki.selfhtml.org/images/f/fe/Doppeldecker.svg">
        <title>Doppeldecker</title>
      </image>		
	</symbol>
  </defs>

Der Filter feFlood füllt eine Fläche mit einer in flood-color festgelegten Farbe.

Bei den Beispielen in der 2. Spalte (#f1 und #f2) wird das Bild ersetzt. Bei den Bildern in der 2. Spalte wird die Eingangsgrafik mit feComposite wieder mit der gefüllten Fläche verbunden. Dabei können Sie mit operator-Attribut verschiedene Mischformen wählen.

In der 3. Spalte wird eine gefüllte Fläche erzeugt und diese dann mit feComposite mit der Eingangsgrafik vermischt. Dann wird dieses Zwischenergebnis mit der Eingangsgrafik mit dem Filter feBlend überblendet.