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]