svg基础（五）滤镜-高斯模糊，混合模式，偏移，颜色变换

1 作用

滤镜用于对SVG图形增加特殊效果

2 效果

feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur 高斯模糊
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤

2.1 feGaussianBlur：高斯模糊

in="SourceGraphic"属性定义了模糊效果要应用于整个图片

stdDeviation：属性定义了模糊的程度

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="f1" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
      </filter>
    </defs>
    <rect width="100" height="100" stroke="red" stroke-width="5"
    fill="orange" filter="url(#f1)" />
</svg>

在这里插入图片描述

2.2 feBlend：混合模式

允许使用任意的JPG\PNG\SVG文件或带有id属性SVG元素作为输入源

五种模式：

normal — 正常
multiply — 正片叠底
screen — 滤色
darken — 变暗
lighten— 变亮

原图：
在这里插入图片描述

正常混合：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="ga" x="0" y="0" width="200" height="250">
        <feImage width="200" height="250" xlink:href="image.png" result="img1" />
        <feImage width="200" height="250" xlink:href="image2.png" result="img2" />
        <feBlend mode="normal" in="img1" in2="img2" />
        </filter>
    </defs>
    <rect x="10" y="10" width="200" height="250" fill="black" filter="url(#ga)"></rect>
  </svg>

在这里插入图片描述

正片叠底：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="ga" x="0" y="0" width="200" height="250">
        <feImage width="200" height="250" xlink:href="image.png" result="img1" />
        <feImage width="200" height="250" xlink:href="image2.png" result="img2" />
        <feBlend mode="multiply" in="img1" in2="img2" />
        </filter>
    </defs>
    <rect x="10" y="10" width="200" height="250" fill="black" filter="url(#ga)"></rect>
  </svg>

在这里插入图片描述

滤色：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="ga" x="0" y="0" width="200" height="250">
        <feImage width="200" height="250" xlink:href="image.png" result="img1" />
        <feImage width="200" height="250" xlink:href="image2.png" result="img2" />
        <feBlend mode="screen" in="img1" in2="img2" />
        </filter>
    </defs>
    <rect x="10" y="10" width="200" height="250" fill="black" filter="url(#ga)"></rect>
  </svg>

在这里插入图片描述

变暗：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="ga" x="0" y="0" width="200" height="250">
        <feImage width="200" height="250" xlink:href="image.png" result="img1" />
        <feImage width="200" height="250" xlink:href="image2.png" result="img2" />
        <feBlend mode="darken" in="img1" in2="img2" />
        </filter>
    </defs>
    <rect x="10" y="10" width="200" height="250" fill="black" filter="url(#ga)"></rect>
  </svg>

在这里插入图片描述

变亮：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="ga" x="0" y="0" width="200" height="250">
        <feImage width="200" height="250" xlink:href="image.png" result="img1" />
        <feImage width="200" height="250" xlink:href="image2.png" result="img2" />
        <feBlend mode="lighten" in="img1" in2="img2" />
        </filter>
    </defs>
    <rect x="10" y="10" width="200" height="250" fill="black" filter="url(#ga)"></rect>
  </svg>

2.3 feOffset：偏移

2.3.1 偏移

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="f1" x="0" y="0">
        <feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
        <feBlend in="SourceGraphic" in2="offOut" mode="normal" />//混合偏移图像顶部
      </filter>
    </defs>
    <rect width="100" height="100" stroke="red" stroke-width="3"
    fill="yellow" filter="url(#f1)" />
  </svg>

在这里插入图片描述

2.3.2 偏移并模糊（阴影）

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="f1" x="0" y="0" width="150%" height="150%">
        <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
    <rect width="90" height="90" stroke="red" stroke-width="3"
    fill="orange" filter="url(#f1)" />
  </svg>

在这里插入图片描述

2.3.3 偏移并模糊（黑色阴影）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="f1" x="0" y="0" width="150%" height="150%">
        <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
    <rect width="100" height="100" stroke="red" stroke-width="3"
    fill="orange" filter="url(#f1)" />
  </svg>

<feOffset>元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素。

在这里插入图片描述

2.3.4 偏移并模糊（黑色阴影+颜色转换）

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="f2" x="0" y="0" width="150%" height="150%">
        <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
        <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
        <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
    <rect width="100" height="100" stroke="red" stroke-width="3"
    fill="orange" filter="url(#f2)" />
  </svg>

<feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2’矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0）

在这里插入图片描述

2.4 feColorMatrix :颜色变换

用来以一种通用的方式改变颜色值，可以用来创建一个发光的区域

feColorMatrix是一个通用的基元，允许修改任意像素点的颜色或阿尔法值，当type="matrix"时，必须指定一个4x5的矩阵。矩阵中每行数字分别乘以输入像素的r,g,b,a的值和常量1，然后加在一起得到输出值。要设置一个变换，将所有不透明区域回执为相同颜色，可以忽略输入颜色和常量。

矩阵模型：
values="
    0    0    0    red    0
    0    0    0    green  0
    0    0    0    blue   0
    0    0    0    1      0
"
red,green,blue的值通常为0到1之间的十进制数，在上述例子中，red为0,green和blue为0.9会产生一个明亮的青色。

上述type为matrxi，除此之外，还有其他三个值：

feColorMatrix的type属性	说明
hueRotate	色相旋转，value是一个单一的数字，描述颜色的色相值应该被旋转多少度
saturate	饱和度，values属性指定一个0到1之间的数字，数字越小，颜色越不饱和
luminanceToAlpha	用亮度决定alpha值,这一属性忽略的values属性值

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="matrix" x="0" y="0">
            <feColorMatrix type="matrix" values="
                0 0 0 0   0
                0 0 0 0.3 0
                0 0 0 0.3 0
                0 0 0 1   0
            "></feColorMatrix>
        </filter>
    </defs>
    <text x="10" y="100" font-size="40" fill="red" filter=url(#matrix)>svg滤镜</text>
  </svg>