SVG滤镜
来源:互联网 发布:淘宝怎么删除追加评论 编辑:程序博客网 时间:2024/05/01 09:26
SVG 滤镜用来向形状和文本添加特殊的效果。
SVG 滤镜
在 SVG 中,可用的滤镜有:
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
注释:您可以在每个 SVG 元素上使用多个滤镜!
必须在 <defs> 标签中定义 SVG 滤镜。
高斯模糊(Gaussian Blur)
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜?
<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写,它允许对诸如滤镜等特殊元素进行定义。
请把下面的代码拷贝到记事本,然后把文件保存为 "filter1.svg"。把此文件放入您的 web 目录:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><defs><filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="3" /></filter></defs><ellipse cx="200" cy="150" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/></svg>
代码解释:
- <filter> 标签的 id 属性可为滤镜定义一个唯一的名称(同一滤镜可被文档中的多个元素使用)
- filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时,必须使用 # 字符
- 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
- <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
- in="SourceGraphic" 这个部分定义了由整个图像创建效果
查看例子
另一个 stdDeviation 值不同的例子
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><defs><filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/></filter></defs><ellipse cx="200" cy="150" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/></svg>
查看例子
SVG 渐变必须在 <defs> 标签中进行定义。
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。
在 SVG 中,有两种主要的渐变类型:
- 线性渐变
- 放射性渐变
线性渐变
<linearGradient> 可用来定义 SVG 的线性渐变。
<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写,它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变:
- 当 y1 和 y2 相等,而 x1 和 x2 不同时,可创建水平渐变
- 当 x1 和 x2 相等,而 y1 和 y2 不同时,可创建垂直渐变
- 当 x1 和 x2 不同,且 y1 和 y2 不同时,可创建角形渐变
请把下面的代码拷贝到记事本,然后把文件保存为 "linear1.svg"。把此文件放入您的 web 目录:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/></linearGradient></defs><ellipse cx="200" cy="190" rx="85" ry="55"style="fill:url(#orange_red)"/></svg>
代码解释:
- <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
- fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
- <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
查看例子 (水平渐变)
另一个例子:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/></linearGradient></defs><ellipse cx="200" cy="190" rx="85" ry="55"style="fill:url(#orange_red)"/></svg>
查看例子 (垂直渐变)
SVG 渐变必须在 <defs> 标签中进行定义。
放射性渐变
<radialGradient> 用来定义放射性渐变。
<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写,它允许对诸如渐变等特殊元素进行定义。
请把下面的代码拷贝到记事本,然后把文件保存为 "radial1.svg"。把此文件放入您的 web 目录:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"fx="50%" fy="50%"><stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/><stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/></radialGradient></defs><ellipse cx="230" cy="200" rx="110" ry="100"style="fill:url(#grey_blue)"/></svg>
代码解释:
<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称,fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变,cx、cy 和 r 属性定义外圈,而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。查看例子
另一个例子:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"fx="50%" fy="50%"><stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/><stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/></radialGradient></defs><ellipse cx="230" cy="200" rx="110" ry="100"style="fill:url(#grey_blue)"/></svg>
- SVG滤镜
- SVG 滤镜与渐变
- svg滤镜效果
- SVG滤镜学习
- SVG滤镜:feComponentTransfer
- SVG滤镜:feColorMatrix
- SVG 滤镜(filter)
- SVG 滤镜
- SVG基础九:滤镜
- SVG图形绘制与滤镜
- svg初学——滤镜
- svg滤镜及动画效果
- svg滤镜, 更丰富的色彩魔法!!
- SVG滤镜各元素解释.1
- HTML5之SVG 2D入门10 - 滤镜
- 带你轻松打开svg滤镜的大门
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
- 滤镜
- 单件类的实现
- nginx的配置、虚拟主机、负载均衡和反向代理
- 身份证末尾校验位计算OC
- 《Android群英传》---读书笔记1
- 02-线性结构2 一元多项式的乘法与加法运算
- SVG滤镜
- HDU 2023 求平均成绩
- 内核态空间地址直接映射到用户态空间访问
- (转)NGUI控件说明(中文) UISlider
- (基础十四)LuckNumber(幸运数字)
- COM组件(MFC篇)
- 第十四周 项目1--验证算法--(4)平衡二叉树
- 字符串的编辑距离
- Android圆角图片