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/feColorMatrix

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

Der primitive Filter feColorMatrix verändert die RGBA Farb- und Alphawerte jedes Pixels einer Grafik.[1]

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Folgende Typen sind möglich:

  • matrix: 5x4-Matrix für alle RGBA-Werte[2]
    • values: Standardwert ist: 1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0
      jeder Farbwert kann in seinen Rot, Grün, Blau-Kanälen und im Alphawert beeinflusst werden
  • hueRotate: Farbtonänderung
    • values: Gradzahl von 0-360 (Standardwert 0), positive oder negative Werte möglich
  • saturate: Sättigung
    • values: Wert von 0-1 (Standardwert 1) verringert die Sättigung
  • luminanceToAlpha: Aufhellung des Alphakanals, keine Angabe von values benötigt
Beispiel ansehen …
  <defs>
    <filter id="f1">
      <feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f2">
      <feColorMatrix type="matrix" values="0 0 0 0 0, 1 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f3">
      <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 1 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f4">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
    <filter id="f5">
      <feColorMatrix type="hueRotate" values="-90" />
    </filter>
    <filter id="f6">
      <feColorMatrix type="hueRotate" values="180" />
    </filter>
    <filter id="f7">
      <feColorMatrix type="saturate" values="0" />
    </filter>
    <filter id="f8">
      <feColorMatrix type="luminanceToAlpha" values="0"/>
    </filter>
    <filter id="f9">
      <feColorMatrix type="luminanceToAlpha" result="tmp1" />
      <feComposite in="SourceGraphic" in2="tmp1"
        operator="in" />
    </filter>
  </defs>

  <image x="10" y="10" width="200px" height="200px"
    xlink:href="Lauf-1.jpg">
    <title>Lauf an der Pegnitz - normal ohne Filter</title>
  </image>	
  <image x="230" y="10" width="200px" height="200px" filter="url(#f1)"
    xlink:href="Lauf-1.jpg">
    <title>&lt;feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/></title>
  </image>
Das Bild auf der linken Seite wird durch den Filter unterschiedlich gefärbt.
In der oberen Reihe wurde in der Matrix jeweils ein Farbton hervorgehoben.
In der mittleren Reihe wurde die Farbtonänderung mit hueRotate durchgeführt.
Links unten wurde die Farbsättigung mit saturate aufgehoben.
Das mittlere untere Beispiel wurde mit luminanceToAlpha invertiert. Im letzten Beispiel wurde luminanceToAlpha zusammen mit feComposite angewandt, um den aufgehellten Alphakanal mit dem Originalbild zu vermischen.

Weblinks[Bearbeiten]

Quellen[Bearbeiten]

  1. W3C: feColorMatrixElement
  2. apike.ca: feColorMatrix-Live-Demo


Referenz[Bearbeiten]