2025年2月7日大约 6 分钟
滤镜是 SVG 的一个重要特性，它可以对 SVG 元素进行一些高级的图像处理，比如模糊、阴影、光照等。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 定义滤镜 -->
<filter id="filter_id">
<!-- 滤镜效果 -->
</filter>
<!-- 应用滤镜的目标元素 -->
<rect x="50" y="50" width="100" height="80" filter="url(#filter_id)" />
</svg>滤镜效果
- 模糊(Blur): 使图像产生模糊效果，通过
<feGaussianBlur>元素实现。 - 阴影(Shadow): 为图像添加阴影效果，通过
<feDropShadow>元素实现。 - 偏移(Offset): 为图像添加偏移效果，通过
<feOffset>元素实现。 - 亮度、对比度调整(Brightness, Contrast): 调整图像的亮度和对比度，通过
<feComponentTransfer>元素实现。 - 颜色矩阵(Color Matrix): 通过颜色矩阵操作修改图像的颜色，通过
<feColorMatrix>元素实现。 - 混合模式(Blend Mode): 将两个图像混合在一起，通过
<feBlend>元素实现。
模糊滤镜
模糊滤镜通过 <feGaussianBlur> 元素实现，使用高斯模糊算法来模糊图像。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="blur_filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="red" filter="url(#blur_filter)" />
</svg><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="blur_filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="red" filter="url(#blur_filter)" />
</svg>主要属性:
stdDeviation: 指定高斯模糊的标准差。标准差越大，模糊程度越高。可以使用一个或两个数字，分别表示水平和垂直方向的标准差。如果只提供一个数字，则水平和垂直方向的标准差相同。in: 指定输入图像，通常为SourceGraphic，表示应用滤镜效果的目标元素本身。in还有更多的属性值，请参考MDN-SVG_in。
阴影滤镜
阴影滤镜通过 <feDropShadow> 元素实现，可以为 SVG 图形元素添加阴影效果。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="shadow_filter">
<feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="gray" flood-opacity="0.5" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="red" filter="url(#shadow_filter)" />
</svg><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="shadow_filter">
<feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="gray" flood-opacity="0.5" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="red" filter="url(#shadow_filter)" />
</svg>主要属性:
dx: 属性定义了阴影在水平方向上的偏移量。dy: 属性定义了阴影在垂直方向上的偏移量。stdDeviation: 属性定义了阴影的模糊半径，通常用于控制阴影的模糊程度。flood-color: 属性定义了阴影的颜色，默认为黑色。flood-opacity: 属性定义了阴影的不透明度，默认为1（完全不透明）。
偏移滤镜
偏移滤镜通过 <feOffset> 元素实现，可以用来创建阴影、轮廓和其他视觉效果。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="offset_filter">
<feOffset dx="5" dy="5" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="red" filter="url(#offset_filter)" />
<rect x="50" y="50" width="100" height="80" fill="blue" />
</svg><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="offset_filter">
<feOffset dx="5" dy="5" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="red" filter="url(#offset_filter)" />
<rect x="50" y="50" width="100" height="80" fill="blue" />
</svg>主要属性:
dx: 属性定义了阴影在水平方向上的偏移量。dy: 属性定义了阴影在垂直方向上的偏移量。
feOffset 搭配 feGaussianBlur，实现高斯模糊的阴影效果。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="offset_filter">
<feOffset result="offset" in="SourceGraphic" dx="8" dy="8" />
<feGaussianBlur stdDeviation="4" in="offset" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="blue" filter="url(#offset_filter)" />
<rect x="50" y="50" width="100" height="80" fill="blue" />
</svg><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="offset_filter">
<feOffset result="offset" in="SourceGraphic" dx="8" dy="8" />
<feGaussianBlur stdDeviation="4" in="offset" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="blue" filter="url(#offset_filter)" />
<rect x="50" y="50" width="100" height="80" fill="blue" />
</svg>颜色矩阵滤镜
颜色矩阵滤镜通过 <feColorMatrix> 元素实现，可以对图像进行颜色调整。
该滤镜基于转换矩阵对颜色进行变换。它可以通过一个 5x4 的矩阵来调整颜色的红、绿、蓝和透明度通道。
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />主要属性：
- type: 指定颜色矩阵的类型
- matrix: 自定义 5x4 矩阵。
- saturate: 调整图像的饱和度。
- hueRotate: 旋转图像的色相。
- luminanceToAlpha: 将图像的亮度值转换为透明度。
- values: 当
type设置为matrix时，values属性用于指定矩阵的值。对于其他类型，values属性用于指定特定的参数。
原始(参考):
<svg
width="100%"
height="100%"
viewBox="-50 0 150 78"
xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
<circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
<circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
</g>
</svg>matrix:
<svg
width="100%"
height="100%"
viewBox="-50 0 150 78"
xmlns="http://www.w3.org/2000/svg">
<filter id="colorMeMatrix">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
<g filter="url(#colorMeMatrix)">
<circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
<circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
<circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
</g>
</svg>saturate:
<svg
width="100%"
height="100%"
viewBox="-50 0 150 78"
xmlns="http://www.w3.org/2000/svg">
<filter id="colorMeSaturate">
<feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
</filter>
<g filter="url(#colorMeSaturate)">
<circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
<circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
<circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
</g>
</svg>hueRotate:
<svg
width="100%"
height="100%"
viewBox="-50 0 150 78"
xmlns="http://www.w3.org/2000/svg">
<filter id="colorMeHueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
</filter>
<g filter="url(#colorMeHueRotate)">
<circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
<circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
<circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
</g>
</svg>luminanceToAlpha:
<svg
width="100%"
height="100%"
viewBox="-50 0 150 78"
xmlns="http://www.w3.org/2000/svg">
<filter id="colorMeLTA">
<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
</filter>
<g filter="url(#colorMeLTA)">
<circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
<circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
<circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
</g>
</svg>混合模式滤镜
混合模式滤镜通过 <feBlend> 元素实现，可以将两个图像以特定的混合模式组合在一起。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="blend_filter" x="0" y="0" width="200%" height="200%">
<feOffset result="offset" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blur" in="offset" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blur" mode="normal" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="blue" filter="url(#blend_filter)" />
</svg><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="blend_filter" x="0" y="0" width="200%" height="200%">
<feOffset result="offset" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blur" in="offset" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blur" mode="normal" />
</filter>
<rect x="50" y="50" width="100" height="80" fill="blue" filter="url(#blend_filter)" />
</svg>主要属性:
in: 属性定义了输入图像，通常为SourceGraphic，表示应用滤镜效果的目标元素本身。in还有更多的属性值，请参考MDN-SVG_in。in2: 属性定义了第二个输入图像，通常为SourceGraphic，表示应用滤镜效果的目标元素本身。in2还有更多的属性值，请参考MDN-SVG_in。mode: 属性定义了混合模式，默认为normal，表示正常混合。mode还有更多的属性值，请参考MDN-SVG_mode。