SVG滤镜属性

SVG（Scalable Vector Graphics）是一种基于XML语法的标记型图形格式，可以描述二维向量图形。在SVG中，我们可以通过使用滤镜属性来实现一些常规图形处理算法所能实现的功能，如模糊、阴影、颜色变换等。

SVG滤镜属性的基本语法

<filter id="filter_id" x="0%" y="0%" width="100%" height="100%">
  <feFilterFunctionType attr1 = "value1" attr2 = "value2" ... />
</filter>

• filter: 定义滤镜的标签名。
• id: 滤镜识别码，必须唯一。
• x, y: 定位滤镜的左上角坐标。
• width, height: 滤镜的宽高。

feFilterFunctionType是各种滤镜类型（如 <feGaussianBlur>, <feColorMatrix>)的父标签，它们的详细属性分类有很多，下面简单说明几种常见的滤镜类型。

常见的SVG滤镜类型

高斯模糊

高斯模糊可以让图片变得模糊，常常用于背景。

<filter id="blur">
  <feGaussianBlur stdDeviation="3" />
</filter>

• stdDeviation: stdDeviation 越大, 高斯模糊效果越明显。

颜色矩阵

颜色矩阵可以调整颜色，比如转换成灰度图像。

<filter id="gray">
  <feColorMatrix type="saturate" values="0" />
</filter>

• type: 取值有 matrix, saturate 和 hueRotate 等。
• values: 根据不同的 type, 有不同的值。

阴影

阴影可以让图像产生阴影效果，它可以根据不同颜色定义不同的阴影。

<filter id="shadow">
  <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="rgba(0,0,0,0.3)" />
</filter>

• dx, dy: 阴影偏移量。
• stdDeviation: 阴影范围。
• flood-color: 阴影颜色。
• flood-opacity: 阴影颜色透明度。

SVG滤镜属性应用实例

<svg width="500" height="500">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
      <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="rgba(0,0,0,0.3)" />
    </filter>
    <filter id="blur">
      <feGaussianBlur stdDeviation="2" />
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" filter="url(#shadow)" fill="#FF5722"/>
  <rect x="175" y="50" width="100" height="100" filter="url(#blur)" fill="#FF9800" />
  <rect x="300" y="50" width="100" height="100" filter="url(#shadow)" fill="#FFC107" />
</svg>

上述代码在 SVG 画布上绘制了三个正方形，分别使用了阴影和模糊滤镜。效果图如下所示：