本节介绍

前端教程SVG

通过 Gradients 和 Masks 我们让原本单调、轮廓鲜明的 SVG 图形变得柔和起来；SVG 还支持滤镜和混合，允许我们更加细粒度地、多样化地控制图形的色彩。本节先介绍滤镜。

基本语法

滤镜(或过滤器)是指通过计算单个像素值来修改图形渲染层的一系列指令。

xml

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      filter: url(#filterId); /* filter style property */
    }
  </style>
  <filter id="filterId" filterUnits="" primitiveUnits="" x="" y="" width="" height="" href="#templateFilter">
    <feXXX x="" y="" width="" height="" result="" />
    <feYYY in="" result="" />
    ...other filter primitive elements
  </filter>
  <!-- filter presentation attribute -->
  <circle cx="100" cy="100" r="50" fill="green" filter="url(#filterId)"/>
  <rect ... />
</svg>

用法说明：

通过 <filter> 元素定义各种滤镜的集合
- <filter> 的子元素是以 fe 开头的 filter primitive elements，我们可以称之为滤镜，目前 SVG1.1一共支持 16 个滤镜。
通过 filter presentation attribute 引用 <filter> 元素，或通过 **filter **style property 引用。

<filter> 元素属性说明：

filterUnits="userSpaceOnUse | objectBoundingBox(默认)" 定义了 x,y,width,height 的坐标系统
- userSpaceOnUse 相对于整个 SVG，格式为数值或百分比
- objectBoundingBox 相对于引用元素，格式为分数或百分比
primitiveUnits="userSpaceOnUse(默认) | objectBoundingBox" 定义了子元素的坐标系统，意义同 filterUnits
x,y <filter> 左上角坐标，默认为 -10%
width,height <filter> 元素的宽和高，默认为 120%
href="#templateFilter"引用另外的 <filter> 作为模板使用

<feXXX> filter primitive elements 属性说明（每个滤镜都有不同的属性，但一般都包括以下通用属性）：

x,y 该滤镜左上角坐标
width,height 该滤镜的宽和高
result="resultName" 该滤镜的结果的名字，以便后续其他滤镜可以引用这个结果
in="SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | 自定义resultName" 指定了该滤镜的输入源，即该滤镜处理哪个图片
- SourceGraphic 指的是引用 <filter> 的图形元素，即没有被 <filter> 修改前的原始图形
- SourceAlpha 原始图形的 alpha 通道数据
- BackgroundImage 原始图形的背景
- BackgroundAlpha 原始图形的背景的 alpha 通道
- FillPaint 原始图形的 fill 属性值
- StrokePaint 原始图形的 stroke 属性值
- 自定义resultName 其他滤镜在 result 中设置的名字
- 默认值：如果此元素是第一个元素，则默认为 SourceGraphic，否则默认为前一个滤镜的结果

本节所有滤镜

高斯模糊滤镜

2024-6-4

前端教程SVG

坐标偏移滤镜

2024-6-4

前端教程SVG

颜色矩阵滤镜

2024-6-4

前端教程SVG

矩阵卷积滤镜

2024-6-9

前端教程SVG

填充滤镜

2024-6-4

前端教程SVG

光栅图片滤镜

2024-6-4

前端教程SVG

阴影滤镜

2024-6-7

前端教程SVG

形态滤镜

2024-6-4

前端教程SVG

平铺滤镜

2024-6-4

前端教程SVG

噪声滤镜

2024-6-4

前端教程SVG

映射置换滤镜

2024-6-4

前端教程SVG

颜色通道转换滤镜

2024-6-4

前端教程SVG

本节介绍 ​

基本语法 ​

本节所有滤镜 ​

Preview:

本节介绍

基本语法

本节所有滤镜