学习SVG系列(4):SVG滤镜效果

注意:Internet Explorer和Safari不支持SVG滤镜

<defs>、<filter>

所有互联网的SVG滤镜定义在<defs>元素中,<filter>标签用来定义SVG滤镜,<filter>标签使用必须的ID属性来定义向图形应用到那个滤镜中

SVG模糊效果

<feGaussianBlur>

feGaunssianBlur元素是用于创建模糊效果

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1"
x="0" y="0">
     
<feGaussianBlur in="SourceGraphic" stdDeviation="15"
/>
    </filter>
  </defs>
  <rect width="90"
height="90" stroke="green" stroke-width="3"
  fill="yellow"
filter="url(#f1)" />
</svg>

代码解析:

<filter>元素id属性定义一个滤镜的唯一名称

<feCaussianBlur>元素定义模糊效果

in="SourceGraphic"这个部分定义了由整个图像创建效果

stdDeviation属性定义模糊量

<rect>元素的滤镜属性用来把元素链接到“f1”滤镜

SVG阴影

<feOffset>

feOffset元素用于创建阴影效果

实例1

偏移一个矩形(带<feOffset>),然后混合偏移图像顶部(含<feBlend>)

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg"
version="1.1">
  <defs>
    <filter id="f1"
x="0" y="0" width="200%"
height="200%">
      <feOffset
result="offOut" in="SourceGraphic" dx="20"
dy="20" />
      <feBlend
in="SourceGraphic" in2="offOut" mode="normal"
/>
    </filter>
  </defs>
  <rect width="90"
height="90" stroke="green" stroke-width="3"
  fill="yellow"
filter="url(#f1)" />
</svg>

实例2

偏移图像可以变的模糊(含<feGaussianBlur>)

SVG代码:

<svg
xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1"
x="0" y="0" width="200%"
height="200%">
      <feOffset
result="offOut" in="SourceGraphic" dx="20"
dy="20" />
     
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
      <feBlend
in="SourceGraphic" in2="blurOut" mode="normal"
/>
    </filter>
  </defs>
  <rect width="90"
height="90" stroke="green" stroke-width="3"
  fill="yellow"
filter="url(#f1)" />
</svg>

代码解析

元素的stdDeviation属性定义了模糊量

实例3

制作一个黑色的阴影

SVG代码:

<svg
xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0"
y="0" width="200%" height="200%">
      <feOffset
result="offOut" in="SourceAlpha" dx="20"
dy="20" />
     
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
      <feBlend
in="SourceGraphic" in2="blurOut" mode="normal"
/>
    </filter>
  </defs>
  <rect width="90"
height="90" stroke="green" stroke-width="3"
  fill="yellow"
filter="url(#f1)" />
</svg>

代码解析:

feOffset元素的属性改为"SourceAlpha"在Alpha通道使用残影,而不是整个RGBA像素

实例4

为阴影涂上一层颜色

SVG代码:

<svg
xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1"
x="0" y="0" width="200%"
height="200%">
      <feOffset
result="offOut" in="SourceGraphic" dx="20"
dy="20" />
      <feColorMatrix
result="matrixOut" in="offOut" type="matrix"
      values="0.2
0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
     
<feGaussianBlur result="blurOut" in="matrixOut"
stdDeviation="10" />
      <feBlend
in="SourceGraphic" in2="blurOut" mode="normal"
/>
    </filter>
  </defs>
  <rect width="90"
height="90" stroke="green" stroke-width="3"
  fill="yellow"
filter="url(#f1)" />
</svg>

时间: 2024-10-08 21:55:50

学习SVG系列(4):SVG滤镜效果的相关文章

学习SVG系列(1):SVG基础

什么是SVG? 1.指可伸缩矢量图形 2.用来定义用于网络的基于矢量的图形 3.使用XML格式定义图形 4.图像在放大或改变尺寸的情况下其图形不会有所损失 5.万维网联盟的标准, 用于描述二维矢量图形的一种图形格式 SVG的优势 1.可被非常多的工具读取和修改(比如记事本) 2.与JPEG和GIF图像比起来,尺寸更小,且压缩性强 3.可伸缩 4.图像可在任何的分辨率下被高质量打印 5.可以在图像质量不下降的情况下放大或者缩小 6.图像中的文本是可选的,同时也是可以搜索的(比较适合制作地图) 7.

SVG系列教程:SVG简介与嵌入HTML页面的方式

地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等.感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧. 什么是SVG SVG是"Scalable Vector Graphics&qu

HTML5学习之画布和SVG(四)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <!--图案包

MongoDB学习笔记系列

回到占占推荐博客索引 该来的总会来的,Ef,Redis,MVC甚至Sqlserver都有了自己的系列,MongoDB没有理由不去整理一下,这个系列都是平时在项目开发时总结出来的,希望可以为各位一些帮助和启发,文章中有对新技术的研究(Mongo驱动),对老技术的回顾(代码重构),还有对架构设计的阐述等(面向接口编程,对扩展开放,对修改关闭,所以出现了IMongoRepository接口). MongoDB学习笔记系列~目录 MongoDB学习笔记~环境搭建 (2015-03-30 10:34) M

vsphere学习笔记系列-cluster&amp;resources pool

cluster集群  要实现vmotion.DRS.HA等功能,EXSI主机必须是两台或以上的数量.那怎么判断vmotion等漂移功能在哪些主机执行的呢?这就引出了集群cluster的概念.所有基于vmotion的功能都是在集群内的EXSI主机实现的,VM只会在集群内做漂移. 所有EXSI主机加入集群后,CPU.内存等资源都会池化成集群的资源,由集群分配资源给VM.因此,我们可以看到在集群中,EXSI主机和VM是同等级别的排序,而不像在非集群环境中VM和EXSI是从属关系. 值得注意的是虽然由集

深度学习实践系列(2)- 搭建notMNIST的深度神经网络

如果你希望系统性的了解神经网络,请参考零基础入门深度学习系列,下面我会粗略的介绍一下本文中实现神经网络需要了解的知识. 什么是深度神经网络? 神经网络包含三层:输入层(X).隐藏层和输出层:f(x) 每层之间每个节点都是完全连接的,其中包含权重(W).每层都存在一个偏移值(b). 每一层节点的计算方式如下: 其中g()代表激活函数,o()代表softmax输出函数. 使用Flow Graph的方式来表达如何正向推导神经网络,可以表达如下: x: 输入值 a(x):表示每个隐藏层的pre-acti

OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(下)

1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade out). 那我们这次就来看一看为了实现这么一个简单的功能,OpenUI5框架至少需要提供哪些内容,或者说我们通过这么一个简单的应用来看一下一个最简单的UI5的应用程序的结构. HTML部分应该不用多说,我们只看和UI5相关的代码,第一部分我们称为Bootstrap,包含以下代码段: <!-- 1.)

OPEN(SAP) UI5 学习入门系列之四:更好的入门系列-官方Walkthrough

好久没有更新了,实在不知道应该写一些什么内容,因为作为入门系列,实际上应该更多的是操作而不是理论,而在UI5 SDK中的EXPLORER里面有着各种控件的用法,所以在这里也没有必要再来一遍,还是看官方的用法更地道. 看一下基于最新的库所推荐的项目结构. 另外,我觉得对于初学者来说是一个非常好的消息,就是UI5版本从1.28更新到1.30以及更高之后,Tutorial系列有了重大更新,之前的Get Started->Tutorials->Application Best Practice现在改为

mongodb学习笔记系列一

一.简介和安装 ./bin/mongod --dbpath /path/to/database --logpath /path/to/log --fork --port 27017 mongodb非常的占磁盘空间, 刚启动后要占3-4G左右,--smallfiles 二.基本命令 1.登录mongodb client /use/local/mongo 2.查看当前数据库 show databases; show dbs; 两个可能 3.admin是和管理有关的库,local 是放schema有关