SVG/Tutorials/Filter/feFlood

Mit dem primitiven Filter feFlood können Sie ein Objekt teiltransparent mit Farbe füllen.

Folgende Attribute sind möglich:

• flood-color: Farbangabe; neben Farbwerten und -namen sind auch Angaben wie currentColor möglich
• flood-opacity: Deckkraft (Standardwert ist wie bei allen opacity-Attributen 1)

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.

Quellen

• apike.ca: feFlood
• wikibooks.de: Urfilter feFlood

Referenz

• SVG/Elemente/feFlood