1、SVG滤镜：

feBlend：与图像相结合的滤镜

feColorMatrix：用于彩色滤光片转换

feComponentTransfer

feComposite

feConvolveMatrix

feDiffuseLighting

feDisplacementMap

feFlood

feGaussianBlur：模糊滤镜

feImage

feMerge：多滤镜叠加滤镜

feMorphology

feOffset：过滤阴影

feSpecularLighting

feTile

feTurbulence

feDistantLight：用于照明过滤

fePointLight：用于照明过滤

FeSpotLight：用于照明过滤

feBlend滤镜的模式：

normal 正常
multiply 正片叠底
screen 滤色
darken 变暗
lighten 变亮

滤镜的属性：

属性	作用
x/y	提供左上角的坐标来定义在哪里渲染滤镜效果（默认值：0）
width/heigh	绘制滤镜容器框的宽高（默认都为100%）
result	用于定义一个滤镜效果的输出名字，以便将其用作另一个滤镜效果的输入（in）
in	指定滤镜效果的输入源，可以是某个滤镜导出的result，也可以是下面6个值。

in属性的6个取值：

SVG filter中的in属性，指定滤镜效果的输入源，可以是某个滤镜导出的result也可以是下面6个值：

模糊处理：偏移图像可以变的模糊<feGaussianBlur>

feColorMatrix 是用来转换偏移图像的颜色更接近黑色的颜色

效果图：

<svg><defs><filter id="f1" width="200%" height="200%"><!-- 使用偏移滤镜 --><feOffset in="SourceGraphic" result="offset1" dx="20" dy="20"></feOffset><!-- 用来转换偏移的图像使之更接近黑色的颜色，feColorMatrix通过values属性来控制阴影颜色 --><feColorMatrix in="offset1" result="offset2" type="matrix" values="0.2 0 0 0 0 0 0.8 0 0 0 0 0 1 1 0 0 0 0 1 0"></feColorMatrix><!-- 模糊滤镜 --><feGaussianBlur result="blur" in="offset2" stdDeviation="10"></feGaussianBlur><!-- 使用混合滤镜，主要是将原始标签显示出来 --><feBlend in="SourceGraphic" in2="blur" mode="normal"></feBlend></filter></defs><rect x="0" y="0" width="200" height="100" fill="red" stroke="green" filter="url(#f1)"></rect></svg>

2. SVG渐变

2.1线性渐变

<lineatGradient>元素用于定义线性渐变。

注<linearGradient>元素必须嵌套在<defs>标记内：<defs>标签是定义的缩写，包含特殊元素（例如渐变）的定义

线性渐变可以定义为水平，垂直或角度渐变：

当y1和y2相等且x1和x2不同时，将创建水平渐变
当x1和x2相等且y1和y2不同时，将创建垂直渐变
当x1和x2不同且y1和y2不同时，将创建角度渐变

定义一个线性渐变：

<svg width="800" height="600"><defs><!-- 线性渐变 --><linearGradient id="linear" x1="30%" y1="0%" x2="30%" y2="100%"><stop offset="30%" stop-color="red"></stop><stop offset="100%" stop-color="yellow"></stop></linearGradient></defs><rect x="0" y="0" width="200" height="100" fill="url(#linear)" stroke="green" ></rect></svg>

2.2径向渐变

<radialGradient>元素用于定义放射性渐变

注<radialGradient>元素必须嵌套在<defs>标记内：<defs>标签是定义的缩写，包含特殊元素（例如渐变）的定义

定义一个

示例：文本及矩形加渐变

<svg width="800" height="600"><defs><!-- 径向渐变 --><!--   cx cy 表示颜色渐变中心点坐标r 表示渐变的范围fx fy 表示渐变颜色的焦点坐标--><radialGradient id="radial" cx="70%" cy="50%" r="30%" fx="50%" fy="50%"><stop offset="30%" stop-color="red"></stop><stop offset="100%" stop-color="yellow"></stop></radialGradient></defs><rect x="0" y="0" width="200" height="100" fill="url(#radial)" stroke="green" ></rect><text x="200" y="50" font-size="40" fill="url(#radial)">SVG</text></svg>

<radialGradient>标签的id属性可为渐变定义一个唯一的名称
cx、cy和r属性定义的最外层圆，fx和fy定义的最内层圆
渐变颜色范围可以由两个或两个以上的颜色组成，每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
填充属性把ellipse元素链接到此渐变

SVG滤镜、阴影、渐变相关推荐

SVG滤镜+阴影+渐变--学习笔记
SVG滤镜的种类: 滤镜描述 feBlend 把两个对象组合在-起,使它们受特定的混合模式控制 feColorMatrix 基于转换矩阵对颜色进行变换,每-像素的颜色值都经过矩阵计算出新颜色 feC ...
SVG阴影滤镜及渐变基础
<defs>元素是定义的标签,包含特殊元素的定义. <filter>元素用于定义svg滤镜.具有必需的id属性,用于标识滤镜,相当于定义一个过滤器 <feOffset&g ...
SVG阴影、滤镜、渐变
一.SVG阴影 <defs>和<filter> 所有lnternst 滤镜都在<defs>元素中定义. <defs>元素是定义的缩写,包含特殊元素(例如 ...
svg 阴影渐变动画
svg 阴影渐变动画 SVG 允许我们定义以后需要重复使用的图形元素.建议把所有需要再次使用的引用元素定义在 <defs> 元素里面. <filter> 元素作用是作为原子滤镜 ...
IE滤镜实现透明度/阴影/渐变等特效
2019独角兽企业重金招聘Python工程师标准>>> IE滤镜实现透明度/阴影/渐变等特效 CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用 ...
SVG 教程（五）文本，Stroke 属性，SVG 滤镜，SVG 模糊效果
SVG <text> SVG 文本 - <text> <text> 元素用于定义文本. 实例 1 写一个文本: 下面是SVG代码: <svg xmlns=&q ...
【转】CSS3 圆角阴影渐变透明旋转等功能详述
本文转载自yu0319@126<CSS3圆角阴影渐变透明旋转等功能详述> 随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上 ...
css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...
html中如何设置图片填充颜色渐变,实现SVG图标的渐变填充效果
2016年我写过一篇文章如何使用SVG图标,其"试验性部分"的结语是个警告 - "抱歉,渐变填充无法工作". 我指的是像fill: linear-gradien ...

SVG滤镜、阴影、渐变