【CSS】SVG（八）——滤镜这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战 SVG（八）—

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

SVG（八）——滤镜

这次我们来看看SVG中的滤镜

（8）滤镜

（8.1）filter标签

在之前的文章中有介绍过CSS的滤镜filter，是通过filter属性来控制的
而SVG中的滤镜则需要使用<filter>标签来定义一个滤镜
- 语法：<filter id="filterName"></filter>
- 属性：
  - id：通过id属性来给该滤镜定义一个唯一标识
    - 在使用滤镜的时候需要用到这个id属性
- 额外属性：
  - x y width height这四个属性一起定义了SVG滤镜容器的范围
  - filterUnits定义了过滤器内部的坐标系属性

而<filter>标签内部就是SVG的滤镜了

<filter id="filter-blur">
    <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
</filter>

这里的<feGaussianBlur>标签就是SVG的滤镜了

~~这里定义了一个高斯模糊滤镜~~

（8.2）各种滤镜

SVG中的滤镜种类有很多，包括：
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
这些滤镜标签都包含一些特殊的属性，不同滤镜拥有的属性不同，但有一些属性是每一个滤镜标签都有的
- x、y：用于定义滤镜渲染容器的左上角的坐标，表示从(x,y)处为滤镜原点开始渲染滤镜效果，默认为(0,0)
- width、height：用于定义滤镜渲染容器的宽、高，默认为100%
- result：表示将当前滤镜效果输出，可以用作另一个滤镜的in输入源
- in：用于指定当前滤镜效果的输入源
  - 该属性可以是其它滤镜的result输出
  - 也可以是固定的属性值：
    - SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint
    - SourceGraphic：表示将图形的RGB通道作为 <filter> 的输入源
    - SourceAlpha：表示将原图像的 Alpha 通道作为<filter>的输入源（得到黑白色的图像）
    - ~~其它四种不常用~~

使用滤镜

可以放在元素上，直接使用filter="url()"属性来引入需要使用的滤镜
也可以在样式中设置，使用filter: url()属性来引入相关的滤镜
- url内部就是需要引入的滤镜id

<svg>
    <filter id="filter-blur">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"></feGaussianBlur>
    </filter>
    <path 
	filter="url(#filter-blur)" 
	d="M 100 50,L 50 100,L 100 150,L 150 100,L 100 50,L 75 100,L 100 125,L 125 100,Z"
    />
</svg>

/* 或者这样使用 */
svg {
    filter: url(#filter-blur);
}

其最终效果是这样的
但和直接使用filter: blur(2px);稍微有些差异

同时，<filter>标签内还可以嵌套多个滤镜
- 通过各种滤镜之间的搭配，以实现各种滤镜效果
- 示例：
```
<svg>
    <filter id="shadow"  x="0"  y="0" width="100"  height="100">
        <feOffset in="SourceAlpha" result="offsetResult" dx="5" dy="20" />
        <feGaussianBlur in="offsetResult" result="blurResult"  stdDeviation="5" />
        <feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
    </filter>
    <path 
	filter="url(#shadow)"  
	d="M 100 50, L 50 100, L 100 150, L 150 100, L 100 50, L 75 100, L 100 125, L 125 100, Z"
    />
</svg>
```
  - 原始图形
  - 先添加一个偏移滤镜，并将其Alpha通道作为输入源
    - 通过dx、dy来设置滤镜的偏移量
    - 通过result将其滤镜结果输出
  - 然后将偏移滤镜的结果result作为模糊滤镜的输入源
    - 通过stdDeviation来设置模糊量
    - 通过result将其滤镜效果输出
  - 最后通过混合滤镜将上面两种滤镜的效果进行混合
    - 通过mode设置混合模式
    - 通过in来设置输入源
    - 通过in2来设置第二个输入源

更多滤镜效果，这里不做展开介绍