<defs>元素是定义的标签，包含特殊元素的定义。

<filter>元素用于定义svg滤镜。具有必需的id属性，用于标识滤镜，相当于定义一个过滤器

<feOffset>元素用于定义创建阴影效果；想法是拍摄svg图形并将其在xy平面中移动一点，然后将原始图像混合在偏移图像的顶部。

<feGaussianBlur>元素定义模糊滤镜

<feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。'0.2"矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色(黑色为0)

代码

<svg><!-- 定义标签 --><defs><!-- 过滤标签 --><filter id="a1" width="200%" height="200%" ><!-- 使用偏移滤镜 --><feOffset in="SourceGraphic" result="off" dx="10" dy="10"/><!-- 用来转换偏移的图像使之更接近于黑色的颜色feColorMatrix 通过values属性来控制阴影颜色 --><feColorMatrix in="off"type="matrix"result="colorMatrix"values="0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/><!-- 模糊滤镜 stdDeviation:设置模糊度 --><feGaussianBlur in="colorMatrix" result="out" stdDeviation="5"/><!-- 使用混合滤镜，主要是将原始标签显示出来 --><feBlend  in="SourceGraphic" in2="out" mode="normal"/><!-- 注：in在上层，in2在下层 --></filter></defs><rect x="20" y="20" width="100" height="100" stroke="green" fill="yellow" filter="url(#a1)"/></svg>

in、in2标识为给定的滤镜原始输入：SourceGraphic / SourceAlpha / Backgroundlmage / BackaroundAloha / FillPaint / StrokePaint / <filter-primitive-reference>

滤镜的种类

滤镜有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

滤镜的属性：

属性作用

x，y 提供左上角的坐标来定义在哪里渲染滤镜效果（默认值：0）

width，height 绘制滤镜容器框的高宽（默认值都为1：00%）

result 用于定义一个滤镜效果的输出名字，以便将其用作另一个滤镜效果的输入（in）

in 指定滤镜效果的输入源，可以是某个滤镜导出的result，也可以是下面的六个值 ↓

in的六个值：

SourceGraphic：该关键词表示图形元素自身将作为<filter>原语的原始输入

SourceAlpha：该关键词表示图形元素自身将作为〈filter>原语的原始输入。SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的非透明部分

Backgroundlmage：与 SourceGraphic类似，但可在背景上使用。需要显式设置

BackgroundAlpha：与SourceAlpha类似，但可在背景上使用。需要显式设置

FillPaint：将其放置在无限平面上一样使用填充油漆

StrokePaint：将其放在无限平面上一样使用描边绘画

SVG 中的混合模式种类比 CSS 中的要少一些，只有 5 个，其作用与 CSS 混合模式完全一致：

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

SVG渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。SVG渐变主要有两种类型:

Linear-线性的

Radial-径向的

线性渐变

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

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

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

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

当x1和×2相等且y1和y2不同时，将创建垂直渐变

当x1和×2不同且y1和y2不同时，将到建角度渐变

示例

<svg width="800" height="800"><defs><!-- 定义线性渐变 --><linearGradient id="a1"x1="0%" y1="0%"x2="100%" y2="0%"spreadMethod=""><!-- 设置渐变色 使用stop --><stop offset="30%" stop-color="red"/><stop offset="60%" stop-color="yellow"/><stop offset="100%" stop-color="red"/></linearGradient></defs><rect x="50" y="50" width="200" height="200" stroke="red" fill="url(#a1)"/></svg>

效果图

径向渐变

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

radialGradient标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

adialGradient标签的id属性可为渐变定义一个唯一的名称.cx，cy和r属性定义的最外层圆和Fx和Fy定义的最内层圆

渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束

填充属性把ellipse元素链接到此渐变

示例2

<svg width="800" height="800"><defs><!-- 定义径向渐变 --><radialGradient id="a2" cx="50%" cy="50%"fx="50%" fy="50%" r="50%"><!-- 设置渐变色 使用stop --><stop offset="50%" stop-color="red"/><stop offset="100%" stop-color="pink"/></radialGradient></defs><rect x="250" y="50" width="200" height="200" stroke="red" fill="url(#a2)"/></svg>

效果图2

SVG阴影滤镜及渐变基础相关推荐

SVG阴影、渐变、滤镜
一.理解SVG阴影 1.<defs>和<filter> 所有Internet SVG滤镜都在<defs>元素中定义. <defs>元素是定义的缩写.包含 ...
SVG阴影、滤镜、渐变
一.SVG阴影 <defs>和<filter> 所有lnternst 滤镜都在<defs>元素中定义. <defs>元素是定义的缩写,包含特殊元素(例如 ...
SVG 教程（六）SVG 阴影，SVG 渐变 - 线性，SVG 渐变- 放射性
SVG 阴影注意: Internet Explorer和Safari不支持SVG滤镜! <defs> 和 <filter> 所有互联网的SVG滤镜定义在<defs> ...
SVG 阴影 SVG 渐变 SVG 动画
1 SVG 阴影 1.1 <defs> SVG 允许我们定义以后需要重复使用的图形元素.建议把所有需要再次使用的引用元素定义在 <defs> 元素里面.这样做可以增加 SVG ...
SVG阴影、渐变，文字
SVG 阴影注意: Internet Explorer和Safari不支持SVG滤镜! <defs>和 <filter> 所有互联网的SVG滤镜定义在<defs> ...
svg 阴影渐变动画
svg 阴影渐变动画 SVG 允许我们定义以后需要重复使用的图形元素.建议把所有需要再次使用的引用元素定义在 <defs> 元素里面. <filter> 元素作用是作为原子滤镜 ...
css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...
图像滤镜艺术--编码基础(Photoshop基础变换的代码实现)
原文:图像滤镜艺术--编码基础(Photoshop基础变换的代码实现) 自从上一篇博客写完之后,到现在已经有段时间了,这段时间不是不想接着写,只是想做的更好了在写出来给大家看呵呵. 今天,我将给大家介 ...
H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变
上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像.像素级操作,接下来继续讲解H5:画布Canvas基础. 文字虽然最近的WebKit版本和Firefox 3.1 nightly bui ...

SVG阴影滤镜及渐变基础

滤镜的种类

滤镜的属性：

SVG渐变

SVG阴影滤镜及渐变基础相关推荐

最新文章

热门文章