深入浅析HTML5中的SVG,深入浅析HTML5SVG

2019-05-01 作者:计算机教程   |   浏览(190)

设置模糊

由于常规CSS模糊滤镜不支持定向模糊,所以我们不得不使用SVG滤镜。

我们已经在《Creative Gooey Effects》这篇文章中介绍过SVG滤镜的基础知识。

为此,我们将只使用高斯滤镜模糊feGaussianBlur原语。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters"> <defs> <filter id="blur"> <fegaussianblur in="SourceGraphic" stddeviation="0,0"/> </filter> </defs> </svg>

1
2
3
4
5
6
7
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters">
  <defs>
    <filter id="blur">
      <fegaussianblur in="SourceGraphic" stddeviation="0,0"/>
    </filter>
  </defs>
</svg>

stdDeviation属性用于设置模糊强度,并且可以占用两个参数,用于水平和垂直方向的模糊。

将滤镜应用到一个元素上,就像我们之前看到的那样,非常简单:

.selector{ -webkit-filter: url("#blur"); filter: url("../index.html#blur"); }

1
2
3
4
.selector{
-webkit-filter: url("#blur");
filter: url("../index.html#blur");
}

然而,对于动态模糊效果,我们仍得通过JS动态更新每个帧的滤镜。

首先,我们必须选择并将滤镜存储在一个变量中,以便以后可以访问它。由于jQuery与SVG元素不兼容,所以我们需要使用本机JS函数选择元素:

var filters = document.querySelector(".filters"), // the SVG that contains the filters defs = filters.querySelector("defs"), // the element inside the SVG blur = defs.querySelector("#blur"), // the blur filter blurFilter = blur.firstElementChild; // the feGaussianBlur primitive

1
2
3
4
var filters = document.querySelector(".filters"), // the SVG that contains the filters
defs = filters.querySelector("defs"), // the  element inside the SVG
blur = defs.querySelector("#blur"), // the blur filter
blurFilter = blur.firstElementChild; // the feGaussianBlur primitive

然后设置强度,即改变滤镜原语的stdDeviation属性。例如,要设置一个水平12px的模糊:

blurFilter.setAttribute("stdDeviation","12,0");

1
blurFilter.setAttribute("stdDeviation","12,0");

 

图片 1

记住,此模糊滤镜只支持X或Y方向上的方向模糊,不能任意角度,因此你需要相应地规划好动画效果。

还有,改变模糊滤镜会影响与其相关联的所有对象,因此我们需要为将应用此效果的每个对象添加一个新的元素。下面是一种动态创建这些滤镜的简单方法:

// go through all the objects that need a blur filter $(".js-blur").each(function(i){ // clone the filter var blurClone=blur.cloneNode(true); // create and set a new ID so we can use the filter through CSS var blurId="blur" i; blurClone.setAttribute("id",blurId); defs.appendChild(blurClone); // set the CSS var filter="url(#" blurId ")"; $(this) .css({ webkitFilter:filter, filter:filter }) // store the filter reference on the object for practicity .data("blur",blurClone) ; });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// go through all the objects that need a blur filter
$(".js-blur").each(function(i){
// clone the filter
var blurClone=blur.cloneNode(true);
 
// create and set a new ID so we can use the filter through CSS
var blurId="blur" i;
blurClone.setAttribute("id",blurId);
 
defs.appendChild(blurClone);
 
// set the CSS
var filter="url(#" blurId ")";
$(this)
.css({
webkitFilter:filter,
filter:filter
})
// store the filter reference on the object for practicity
.data("blur",blurClone)
;
});

深入浅析HTML5中的SVG,深入浅析HTML5SVG

SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。1998年,万维网联盟成立了一个工作组,研发一种通过XML来表现矢量图形的技术——SVG!由于SVG也是一种XML文件,所以SVG也继承了XML的开放性、可移植性和交互性的优点,本文介绍html5中svg,需要的朋友参考下

SVG 背景

SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。1998年,万维网联盟成立了一个工作组,研发一种通过XML来表现矢量图形的技术——SVG!由于SVG也是一种XML文件,所以SVG也继承了XML的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持SVG,大家可以从 这里 得到更多的兼容信息,其中包括:

使用<embed>或者<object>元素来显示基本的SVG图形;
使用<img>来显示SVG图形;
将SVG图形应用为CSS背景图;
直接在HTML文档中使用<svg>标签(需要HTML5支持);
对使用CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效;
对SVG对象使用类似photoshop的效果,包括模糊和色彩处理;
对SVG图像使用动画;
使用SVG格式的字体;

* SVG
* 基本内容
* SVG并不属于HTML5专有内容
* HTML5提供有关SVG原生的内容
* 在HTML5出现之前,就有SVG内容
* SVG,简单来说就是矢量图
* SVG文件的扩展名为".svg"
* SVG使用的是XML语法
* 概念
* SVG是一种使用XML技术描述二维图形的语言
* SVG的特点
* SVG绘制图形可以被搜索引擎抓取
* SVG在图片质量不下降的情况下,被放大
* SVG与Canvas的区别
* SVG
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域的程序(例如百度地图)
* 不能用来实现网页游戏
* Canvas
* 依赖分辨率
* 不支持事件绑定
* 最合适网页游戏
* 保存为".jpg"格式的图片
* 用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
* HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 - 类似于<canvas>元素
* 默认大小为300px*150px
* 使用CSS样式
* 使用SVG绘制图形,必须定义<svg>元素中
* 绘制图形
* 矩形元素

代码如下:
<rect x="" y="" width="" height="" />
<!DOCTYPE html>
<html>
<head>
<title>SVG绘制矩形</title>
<meta charset="utf-8" />
</head>
<body>
<!--
在HTML页面中使用svg标签的话
* 定义<svg></svg>元素
* 类似于<canvas>元素的作用
* 默认大小 300px * 150px
* 设置宽度和高度 - 属性和style
* 利用svg绘制所有图形,必须定义在<svg>元素内
* 利用svg绘制的图形是与HTML页面有关的
-->
<svg style="background:pink;width:400px;height:400px;">
<!--
绘制矩形 - <rect />
* x和y - 绘制矩形的左上角坐标值
* width和height - 绘制矩形的宽度和高度
* 必须使用属性方式,不能使用style样式方式
* 默认颜色为黑色
设置颜色 - 既可以使用属性,还可以使用样式
* fill - 设置填充颜色
* stroke - 设置描边颜色
设置线条宽度
* stroke-width
注意
* svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性
-->
<rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" />
<rect x="120" y="10" width="100" height="100" style="fill:blue;stroke:black;stroke-width:5" />
</svg>
</body>
</html>
* 圆形元素
<circle cx="" cy="" r="" />
<body>
<svg width="500px" height="500px">
<!--
绘制圆形 - <circle>
* cx和cy - 圆形的圆形坐标值
* r - 圆形的半径
-->
<circle cx="100" cy="100" r="100" fill="pink" />
</svg>
</body>
* 椭圆元素
<ellipse cx="" cy="" rx="" ry="">
<body>
<svg width="300px" height="300px">
<ellipse cx="150" cy="150" rx="150" ry="100" />
</svg>
</body>
* 直线元素
<line x1="" y1="" x2="" y2="" />
<body>
<!--
<svg>元素中只能包含一个图形元素,还是可以包含多个图形元素?
* 可以包含多个图形元素
-->
<svg width="300px" height="300px">
<line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/>
<line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/>
</svg>
</body>
* 折线元素
<polyline points="">
<body>
<svg width="500px" height="500px">
<!--
<polyline>元素 - 折线
* points - 设置起点、折点及终点
* x和y之间使用","分隔
* 多个点之间使用空格分隔
折线的特点
* 默认将折线中的区域(起点到终点),默认提供黑色
-->
<polyline points="10,10 200,10 200,200 10,200 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
</body>
* 多边形元素
<polygon points="" />
<body>
<svg width="500px" height="500px">
<polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
</body>
* 特效元素
* 渐变 - 渐变元素定义在<defs>元素内
* 线型渐变 - <linearGradient>
* 该元素是起始元素
<linearGradient x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
<body>
<svg width="400px" height="400px">
<!--
设置线型渐变 - <linearGradient>
* 用法 - 将渐变定义在<defs>元素中
* 特点 - 具有基准线
* 起点坐标值 - x1和y1
* 终点坐标值 - x2和y2
* 注意
* 该元素是起始元素
<linearGradient></linearGradient>
* x1和y1、x2和y2的值都是百分值
* 定义id属性
* 用于将设置的渐变添加到绘制的图形元素中
* 使用<stop>元素 - 设置渐变的颜色
* offset - 设置渐变颜色的位置
* 该值也是百分值
* stop-color - 设置渐变颜色
* stop-opacity - 设置渐变颜色的透明度
-->
<defs>
<linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<!--
如何可以将上面设置线型渐变,添加在下面的矩形中?
* 使用fill属性,值为url(#渐变元素的id值)
-->
<rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" />
</svg>
</body>

* 扇形(射线)渐变 - <radialGradient>
* 滤镜 - 高斯模糊
* 滤镜使用<filter>元素
* <feGaussianBlur>元素 - 高斯模糊
* in="SourceGraphic"
* stdDeviation - 设置模糊程度

代码如下:
<body>
<svg width="500px" height="500px">
<!--
如何设置高斯模糊滤镜
* 定义<defs></defs>元素 - 滤镜定义在该元素中
* 定义<filter></filter>元素 - 表示SVG的滤镜
* 定义高斯模糊元素<feGaussianBlur>
* 属性
* in="SourceGraphic" - 固定写法
* stdDeviation - 设置模糊程度
* 为<filter>元素定义id属性值
* 方便添加在绘制图形的元素中
-->
<defs>
<filter id="myfilter">
<feGaussianBlur in="SourceGraphic" stdDeviation=5 />
</filter>
</defs>
<!--
如何将上面的高斯模糊与下面的元素进行关联
* 使用filter属性,值为url(#id)
* 设置当前图形的滤镜
-->
<rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" />
</svg>
</body>

* 注意 - 定义在<defs>元素中
* TWO.js
* 基本内容
* JS库介绍
* three.js - 专门用于绘制三维图形
* two.js - 专门用于绘制二维图形
* two.js支持的格式
* SVG - 默认
* Canvas
* WebGL - 专门用于绘制图像
* 如何使用two.js
* 在HTML页面中引入two.js文件
* 在HTML页面中定义容器(<div>)
* 在javascript代码中
* 获取HTML页面中的容器
* 创建Two对象,将该对象添加到容器中
new Two(params).appendTo(Element);
* 使用two.js提供的API方法进行绘制
* 利用two.js提供的方法,设置图形
* 利用update()方法进行绘制
* 创建Two对象
* 构造器 - new Two(params)
* params参数 - 设置当前对象的信息
* type - 设置当前使用的格式(Two.Types.svg)
* svg - 默认值
* canvas
* webgl
* width和height - 设置宽度和高度
* fullscreen - 设置是否全屏
* Boolean值,true表示全屏
* 图形方法
* makeLine() - 绘制线条
* makeRectangle() - 绘制矩形
* makeCircle() - 绘制圆形
* makeEllipse() - 绘制椭圆
* 动画方法
* update() - 更新动画
* play() - 添加动画(循环)
* pause() - 删除动画
* 设置绘制图形的样式
* 调用Two对象的绘制方法绘制图形时,返回该图形对象
* 通过该图形对象,设置相关属性值
* 分组操作
* Two.Group
* 动画效果
* bind(event,callback)方法 - 事件绑定
* event - 绑定事件名称
* update - 对应update()方法的作用
* 所有的DOM事件都可以绑定
* callback - 事件处理函数
* 扩展内容
* 前端开发工具
* Aptana Studio 3 - 代码提示
* Webstrom - 国内前端开发人员神器
* 实际开发中
* 多用SVG
* 不失真
* 可被搜索
* 页面优化 - 减少外部链接
* <a href="">
* <img src="">
* Canvas - HTML绘制图形
* 实际运行中,是以图片方式出现(.png)
* 不能被搜索引擎抓取
* 放大后失真
* SVG内容
* 内容量非常大
* 静态绘制图形
* 动态动画效果
* 专门提供事件
* 网上关于SVG的资料很少(没有书籍)
* SVG的规范(W3C英文)
* SVG或CANVAS在HTML页面中定义
* 是只能定义一个元素,还是可以定义多个元素?
* 在一个HTML页面可以定义多个<svg>或<canvas>元素
* SVG还是CANVAS都是允许同时定义(绘制)多个图形
* 在实际开发中的使用
* SVG在将来的工作开发,使用率并不高
* SVG图片一般都是由UI设计师来完成
* SVG即使是我们自己来设计(绘制)
* 目前网络上很多专门提供现成的SVG图片的网站
* 使用JS库

------------------------------------------------------------------------------------>为了生活而改变,为了改变而创造.

http://www.bkjia.com/HTML5/1075888.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1075888.htmlTechArticle深入浅析HTML5中的SVG,深入浅析HTML5SVG SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。1998年,万维网联盟成立了一个工作组,研发一...

测量速度

接下来,我们需要能够计算得到自上一帧以来对象移动的距离。每一帧我们都要计算。实现方法可能会根据设置的不同而不同;例如动画如何完成方面的设置等等。在本教程中,我们将采用更通用的方法,尽管它可能无法针对所有用例进行优化,但适用于大多数JS和CSS动画。

为了得到距离结果,我们将使用jQuery的offset函数,这正是我们需要的:它返回元素的坐标,相对于文档(而不是它的父类)而言,并且将transform属性考虑在内。

为了能够检查改变并更新每一帧,我们将使用requestAnimationFrame。

下面是一个例子:

// the element we want to apply the effect var $element=$(".selector"); // storing the last position, to be able to measure changes var lastPos=$element.offset(); // a multiplier, to be able to control the intensity of the effect var multiplier=0.25; // a helper to simplify setting the blur. function setBlur(x,y){ blurFilter.setAttribute("stdDeviation",x "," y); } (function updateMotionBlur(){ // get the current position of the element var currentPos=$element.offset(); // calculate the changes from the last frame and apply the multiplier var xDiff=Math.abs(currentPos.left-lastPos.left)*multiplier; var yDiff=Math.abs(currentPos.top-lastPos.top)*multiplier; // set the blur setBlur(xDiff,yDiff); // store current position for the next frame lastPos=currentPos; // call to update in the next frame requestAnimationFrame(updateMotionBlur); })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// the element we want to apply the effect
var $element=$(".selector");
// storing the last position, to be able to measure changes
var lastPos=$element.offset();
// a multiplier, to be able to control the intensity of the effect
var multiplier=0.25;
 
// a helper to simplify setting the blur.
function setBlur(x,y){
blurFilter.setAttribute("stdDeviation",x "," y);
}
 
(function updateMotionBlur(){
// get the current position of the element
var currentPos=$element.offset();
 
// calculate the changes from the last frame and apply the multiplier
var xDiff=Math.abs(currentPos.left-lastPos.left)*multiplier;
var yDiff=Math.abs(currentPos.top-lastPos.top)*multiplier;
 
// set the blur
setBlur(xDiff,yDiff);
 
// store current position for the next frame
lastPos=currentPos;
 
// call to update in the next frame
requestAnimationFrame(updateMotionBlur);
})();

结果如下:图片 2

 

这不过是仅考虑一个要素的基本方法。更复杂的可能需要特别为其优化的代码。对于更复杂的拍摄,你可以考虑将动态模糊效果应用于多个对象,在没有动画时禁用模糊和速度计算,等等。

到这里本教程就结束了! 再说一次,请注意,这种效果可能很耗费资源,所以你应该避免在大型对象上使用它。

1 赞 4 收藏 3 评论

图片 3

本文由www.2003.com发布于计算机教程,转载请注明出处:深入浅析HTML5中的SVG,深入浅析HTML5SVG

关键词: