暗黑模式
本节介绍
前端教程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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
用法说明:
- 通过
<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"
定义了子元素的坐标系统,意义同 filterUnitsx,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,否则默认为前一个滤镜的结果