Savetheinternet.png

Die EU-Urheberrechtsreform wird das Internet, wie wir es kennen, grundlegend verändern – wenn sie denn in der finalen Abstimmung angenommen wird. Das können wir aber immer noch verhindern!

Weitere Informationen: https://juliareda.eu/2019/02/artikel-13-endgueltig/

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]