IPC SE19 Medienpartner 630x250 48558 v1.jpg

SELFHTML ist in diesem Jahr Medienpartner der IPC.

Für die Hauptkonferenz vom 4. – 6. Juni in Berlin verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

SVG/Filter/feFlood

Aus SELFHTML-Wiki
< SVG‎ | Filter
Wechseln zu: Navigation, Suche

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

  • SVG 1.1
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
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.

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)


Quellen[Bearbeiten]

  1. W3C: feFloodElement

Referenz[Bearbeiten]