Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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]