常见SVG颜色变换滤镜的Matrix值实例页面

CSS代码：

.grayscale { filter: url(#colorMatrixGrayscale); }
.invert { filter: url(#colorMatrixInvert); }
.BGR { filter: url(#colorMatrixBGR); }
.sepia { filter: url(#colorMatrixSepia); }
.blackWhite { filter: url(#colorMatrixBlackWhite); }
.polaroid { filter: url(#colorMatrixPolaroid); }

HTML代码：

<h4 class="fill">原图</h4>
<p><img src="1.jpg" /></p>

<h4 class="fill">灰度</h4>
<p><img src="1.jpg" class="grayscale" /></p>

<h4 class="fill">RGB转BGR</h4>
<p><img src="1.jpg" class="BGR" /></p>

<h4 class="fill">褐色</h4>
<p><img src="1.jpg" class="sepia" /></p>

<h4 class="fill">黑白</h4>
<p><img src="1.jpg" class="blackWhite" /></p>

<h4 class="fill">拍立得相片</h4>
<p><img src="1.jpg" class="polaroid" /></p>


<svg width="0" height="0">
  <defs>
<filter id="colorMatrixGrayscale">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    .333 .333 .333 0 0
    .333 .333 .333 0 0
    .333 .333 .333 0 0
    0 0 0 1 0" 
  />
</filter>
<filter id="colorMatrixInvert">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    -1 0 0 0 1
    0 -1 0 0 1
    0 0 -1 0 1
    0 0 0 1 0" 
  />
</filter>
<filter id="colorMatrixBGR">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    0 0 1 0 0
    0 1 0 0 0
    1 0 0 0 0
    0 0 0 1 0" 
  />
</filter>
<filter id="colorMatrixSepia">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    0.393  0.768  0.188  0  0 
    0.349  0.685  0.167  0  0 
    0.272  0.533  0.130  0  0 
    0  0  0  1  0" 
  />
</filter>
<filter id="colorMatrixBlackWhite">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    1.5 1.5 1.5 0 0
    1.5 1.5 1.5 0 0
    1.5 1.5 1.5 0 0
    -1 -1 -1 1 0" 
  />
</filter>
<filter id="colorMatrixPolaroid">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    1.438 -0.062 -0.062 0 0
    -0.122 1.378 -0.122 0 0
    -0.016 -0.016 1.483 0 0
    -0.03 0.05 -0.02 1 0" 
  />
</filter>
  </defs>
</svg>