这一节我们只讲一个svg滤镜feColorMatrix滤镜，该滤镜有两个属性：type和values。type可以取的值有：matrix，hueRotate，saturate，luminanceToAlpha，不同的type值对应不同的values。下面我们逐个学习：

hueRotate（色相旋转）

想搞懂色相旋转就要知道HSL和HSV色彩空间，这两个色彩空间H指的就是色相。什么是色相呢？看下面的圆盘:

颜色分布到一个盘上，用角度表示不同的颜色，0度就是红色，120度为绿色。我们通过一个例子验证一下：

转变后并非能将纯红色变为纯的绿色,转变后的色值为：#00b200，这里面我们只要知道这个色盘，知道原始颜色旋转后的颜色就行了。

saturate（饱和度）

他的values值是0到1之间的数字，数字越小颜色褪色越多。所谓一图胜千言，一个例子解决战斗：

<svg width="500" height="500">
    <defs>
        <filter id="saturateFilter" x="0" y="0">
            <feColorMatrix type="saturate" values="0.2"/>
        </filter>
        <filter id="saturateFilter1" x="0" y="0">
            <feColorMatrix type="saturate" values="0.5"/>
        </filter>
        <filter id="saturateFilter2" x="0" y="0">
            <feColorMatrix type="saturate" values="0.8"/>
        </filter>
    </defs>
    <polygon filter="url(#saturateFilter)" transform="scale(2)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="none" stroke-width="5"/>
    <polygon filter="url(#saturateFilter1)" transform="scale(2) translate(50,0)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="none" stroke-width="5"/>
    <polygon filter="url(#saturateFilter2)" transform="scale(2) translate(100,0)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="none" stroke-width="5"/>
    <polygon transform="scale(2) translate(150,0)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="none" stroke-width="5"/>
</svg>

效果如下：

这就很直观明了了。

luminanceToAlpha（用亮度决定透明度）

这一属性不需要对values赋值， 这个属性怎么理解呢？还记不记得我们在讲解svg蒙层的时候说的计算公式：
(0.2125red + 0.7154green + 0.0721*blue)*opacity
可以这样理解这个滤镜用的也是这个计算公式，只是色值要变成灰度图像，并且在灰度图像上添加一个透明度。

看下面的例子就瞬间明了了。

<svg width="1000" height="500">
    <defs>
        <filter id="saturateFilter" x="0" y="0">
            <feColorMatrix type="luminanceToAlpha"/>
        </filter>
    </defs>
    <polygon filter="url(#saturateFilter)" transform="scale(2)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="#aaaaaa" fill="none" stroke-width="5"/>
    <polygon filter="url(#saturateFilter)" transform="scale(2) translate(50,0)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="#ffffff" fill="none" stroke-width="5"/>
    <polygon filter="url(#saturateFilter)" transform="scale(2) translate(100,0)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="#ff0000" fill="none" stroke-width="5"/>
    <polygon  filter="url(#saturateFilter)" transform="scale(2) translate(150,0)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="#00ff00" fill="none" stroke-width="5"/>
    <polygon  filter="url(#saturateFilter)" transform="scale(2) translate(200,0)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="#0000ff" fill="none" stroke-width="5"/>
</svg>

效果如下：

这个滤镜做两件事情。1：将图像灰度化；2：他的透明度按照上面的公式计算。

matrix（颜色矩阵）

大多数同学一提到矩阵就望而却步，心生畏惧，其实大可不必。还是比较简单的，先看下面的例子：

<svg width="500" height="500">
    <defs>
        <filter id="matrixFilter" x="0" y="0">
            <feColorMatrix type="matrix" values="
            0 0.6 0 0   0
            0 0 0 0.5 0
            0 0 0 0.9 0
            0 0 0 0.8   0"/>
        </filter>
    </defs>
    <polygon filter="url(#matrixFilter)" transform="scale(2)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="none" stroke-width="5"/>
</svg>

效果如下：

其实这个滤镜的作用是通过矩阵修改当前图形的颜色值。矩阵的计算过程如下：

可以看到我们是怎样通过矩阵来修改颜色和透明度。

我的理解是type为hueRotate，saturate，luminanceToAlpha都是对matrix的封装，是常用的方便大家使用，svg提供了对颜色更精细的控制就是矩阵。我们可以根据需要修改想要的颜色。

发光效果制作

先做一个简单的类似这样的五角星。

代码如下：

<svg width="1000" height="500">
    <defs>
        <filter id="saturateFilter" x="0" y="0">
            <feColorMatrix type="matrix" values="
                0 0 0 0 0
                0 0 0.5 0.6 0
                0 0 0 0.9 0
                0 0 0 0.8 0"/>
            <feGaussianBlur stdDeviation="5" result="blue"/>
            <feMerge>
                <feMergeNode in="blue"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <polygon filter="url(#saturateFilter)" transform="scale(2) translate(50,0)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="#003aff" fill="none" stroke-width="5"/>
</svg>

做出来的思路是，根据当前的颜色，做出想要的发光颜色，并且将该颜色加上透明度，然后做一下高斯模糊就行了。对于球体放光，我们可以将元素放大。接下来就可以书接上回，来做科技球的发光效果了。 我们先放做好的效果，对比一下以前的图片。

代码地址： 科技球发光效果 下面是以前的图片

效果立马就上去了。但是渐变色和光照还是效果不同的，下一节我们讲解svg的光照滤镜，将渐变色替换为光照效果后会更加炫酷敬请期待。