目录
1、<feoffset>偏移
2、<feGaussianBlur>模潮
3、<feColorMatrix>涂色
1、<linearGradient>线性渐变
2、<radialGradient>径向渐变
一、SVG阴影
<defs>和<filter>
所有Internet SVG滤镜都在<defs>元素中定义。
<defs>元素是定义的缩写。包含特殊元素(例如滤镜)的定义。
<filter>元素用于定义SVG滤镜。
<filter>元素具有必需的id属性,用于标识滤镜。图形然后指向要使用的滤镜。
滤镜的属性 | |
属性 | 作用 |
x,y | 提供左上角的坐标来定义在哪里渲染滤镜效果。(默认值:0) |
width, height | 绘制滤镜容器框的高宽(默认松100%) |
result | 用于定义一个滤镜效果的输出看手,以便将其用作另一个滤镜效果的输入(in) |
in | 指定滤镜效果的输入源,可以是某个滤镜导出的result ,也可以是下面6个值 |
feBlend 滤镜的模式:
- normal——正常
- multiply——正片叠底
- screen ——滤色
- darken——变暗
- lighten——变亮
1、<feoffset>
<feoffset>元素用于创建阴影效果;想法是拍摄SVG图形(图像或元素)并将其在xy平面中移动一点,然后将原始图像混合在偏移图像的顶部(使用<feBlend> )。
示例1:偏移一个矩形
示例代码如下:
<svg>
<!-- 定义滤镜 defs是一个定义标签 -->
<defs>
<!-- 定义一个过滤器 -->
<filter id="f1" x="0" y="0" width="200%" height="200%">
<!-- 使用偏移路径 -->
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
<!-- 使用混合滤镜,将原始标签显示出来 -->
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<rect x="0" y="0" width="200" height="100" fill="red" stroke="black" filter="url(#f1)"></rect>
</svg>
<filter>元素id属性定义一个滤镜的唯一名称
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜
in="SourceGraphic"指的是模糊效果要应用于整个图片
2、<feGaussianBlur>
<feGaussianBlur>可以使偏移图像变的模潮。
示例2:使偏移图像变的模糊
偏移图像变模糊所需的代码如下:
<!-- 使用模糊滤镜 stdDeviation设置模糊度 -->
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>
<feGaussianBlur>元素的stdDeviation属性定义了模糊量,0不模糊,数值越大越模糊
3、<feColorMatrix>
<feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。'0.2'矩阵的三个值都获取乘以红色,绿色和蓝色通道。降低其值带来的颜色至黑色(黑色为0)
示例4:为阴影涂上一层颜色
阴影涂色所需要的代码为:
<!-- 通过values属性来控制阴影颜色 -->
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="
0.2 0 0 0 0
0 1 0 0 0
0 0 1 1 0
0 0 0 1 0"></feColorMatrix>
二、SVG渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。SVG渐变主要有两种类型:
- Linear-线性的
- Radial-径向的
1、<linearGradient>
<linearGrarlent>元素用于定义线性渐变。
<linearcradient>元素必须嵌套在<defs>标记内;<defs>标签是定义的缩写,包含特殊元素(例如渐变)的定义。
线性渐变可以定义为水平,垂直或角度渐变:
- 当y1和y2相等且x1和x2不同时,将创建水平渐变
- 当×1和x2相等且y1和y2不同时,将创建垂直渐变
- 当x1和×2不同且y1和y2不同时,将创建角度渐变示例1:用从黄色到红色的水平线性渐变定义一个椭圆
示例1: 水平线性渐变
代码:
<svg>
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">
<!-- 设置渐变色,使用stop标签 -->
<stop offset="20%" stop-color="aquamarine"></stop>
<stop offset="40%" stop-color="yellow"></stop>
<stop offset="60%" stop-color="orange"></stop>
<stop offset="80%" stop-color="yellowgreen"></stop>
<stop offset="100%" stop-color="blue"></stop>
</linearGradient>
</defs>
<!-- 矩形 -->
<rect x="0" y="0" width="100" height="100" fill="url(#linear)" stroke="red"></rect>
</svg>
2、 <radialGradient>
- <radialGradient>元素用于定义放射性渐变。
- <radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。
示例2:径向渐变
- cx/cy:表示的是颜色渐变的中心点坐标
- r :表示颜色渐变的范围
- fx/fy :表示的是渐变颜色的焦点坐标
代码:
<svg>
<defs>
<radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="20%" stop-color="aquamarine"></stop>
<stop offset="60%" stop-color="orange"></stop>
<stop offset="100%" stop-color="blue"></stop>
</radialGradient>
</defs>
<rect x="0" y="0" width="100" height="100" fill="url(#radial)" stroke="red"></rect>
</svg>