【澳门葡京】落实动态模糊动画效果,深远浅析HTML5中的SVG

SVG 完成动态模糊动画效果

2017/11/11 · CSS · 3
评论 ·
SVG

原稿出处: Lucas
Bebber   译文出处:码农网
– 小峰   

前些天大家将向我们来得如何成立SVG动态模糊效果,并将其行使于HTML成分的不奇怪化JS或CSS动画。

动态模糊是一种普遍利用于动态影象和动画片的技术,它能使动作看起来更为平整自然。澳门葡京 1

 

在线演示源码下载

动态模糊是静止图像或一多样图像(如电影或动画)中高速移动物体的显而易见图像拖尾。当记录的图像在单帧记录时期发生变化时,由于急速移动或长日子暴光从而致使动态模糊的结果。——维基百科上对动态模糊的牵线

在那篇小说中,我们将介绍如何对品位或垂直的变换制作出类似的动态模糊效果。

瞩目:那种效益相当实用,但唯有一些现代浏览器才支撑。到近日甘休,貌似Chrome具有最佳的性质。

为了对动画片应用动态模糊效果,大家须求在各样帧中按照目标的速度和它移动的趋向使用方向模糊。澳门葡京 2

 

那么,怎么才能发生那种效果啊?

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

SVG是Scalable Vector
Graphics的缩写,意为可缩放矢量图形。一九九八年,万维网联盟成立了1个工作组,研发一种通过XML来显现矢量图形的技巧——SVG!由于SVG也是一种XML文件,所以SVG也继续了XML的开放性、可移植性和交互性的长处,本文介绍html5中svg,需求的心上黄参考下

SVG 背景

SVG是Scalable Vector
Graphics的缩写,意为可缩放矢量图形。1996年,万维网联盟创设了贰个工作组,研发一种通过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 – 设置填充颜色
*【澳门葡京】落实动态模糊动画效果,深远浅析HTML5中的SVG。 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和y一 、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页面中定义
* 是只能定义2个因素,仍能定义八个要素?
* 在一个HTML页面能够定义七个<svg>或<canvas>成分
* SVG照旧CANVAS都以同意同时定义(绘制)多少个图形
* 在骨子里支出中的使用
* SVG在以后的做事付出,使用率并不高
* SVG图片一般都以由UI设计师来成功
* SVG尽管是我们协调来设计(绘制)
* 近日互连网上不少专门提供现成的SVG图片的网站
* 使用JS库

————————————————————————————>为了生存而更改,为了改变而创立.

SVG是Scalable Vector
Graphics的缩写,意为可缩放矢量图形。一九九九年,万维网联盟创设了二个工作组,研发一…

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=”” />
     圆形成分
       <circle cx=”” cy=”” r=”” />
     椭圆成分
       <ellipse cx=”” cy=”” rx=”” ry=””>
     直线成分
       <line x1=”” y1=”” x2=”” y2=”” />
     折线成分
       <polyline points=””>
     多边形成分
       <polygon points=”” />
   特效成分
     渐变 – 渐变元素定义在<defs>成分内
       线型渐变 – <linearGradient>
         该因素是起初成分
  <linearGradient x1=”%” y1=”%” x2=”%” y2=”%”>
    <stop offset=”%” stop-color=”color” />
  </linearGradient>
       扇形(射线)渐变 – <radialGradient>
     滤镜 – 高斯模糊
       滤镜使用<filter>成分
       <feGaussianBlur>成分 – 高斯模糊
         in=”SourceGraphic”
  stdDeviation – 设置模糊程度
       注意 – 定义在<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 – 事件处理函数

实际工作中,SVG大部分是用<svg>+<defs></defs>(只怕symbol)+<use></use>+</svg>的构成来采纳的,defs
顾名思义就是「definitions」定义,我们可以把广大重复性质高的要素,放入defs
成分内,让它成为1个足以另行利用的物件。而symbol越多的只是包涵单个图标。

设置模糊

鉴于常规CSS模糊滤镜不支持定向模糊,所以我们不得不拔取SVG滤镜。

我们曾经在《Creative Gooey
Effects》那篇小说中牵线过SVG滤镜的基础知识。

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

<svg xmlns=”” 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动态更新逐个帧的滤镜。

首先,大家必须挑选并将滤镜存储在3个变量中,以便未来可以访问它。由于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");

 

澳门葡京 3

切记,此模糊滤镜只援救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)
;
});

一 、SVG使用办法

甭管哪个种类格局,svg都不能不作为根标签

  • 外链格局
    那种方式是先定义好叁个svg文件,再在html或css中引入。

// test.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG</title>
</head>
<body>
         ![](test.svg)
</body>
</html>

外链的点子唯有是将svg成分作为三个图形,无法运用JS对其做一些操作,如改变大小颜色等。

  • 内联情势

<div id="div1">
    <svg width="100%" height="100%" >
        <circle cx="100" cy="100" r="40" fill="red" id='circle'></circle>
    </svg>
</div>

内联方式可以向操作普通html成分一样通过getElementById拿到dom,再通过setAttribute方法做属性操作:

<script type="text/javascript">
      var c = document.getElementById('circle');
      c.setAttribute('fill','blue');
</script>

测量速度

接下去,我们要求可以计算得到自上一帧以来对象活动的偏离。每一帧大家都要计算。完毕形式或然会依照设置的例外而各异;例如动画如何形成地点的安装等等。在本教程中,大家将利用更通用的主意,即便它大概无法针对富有用例进行优化,但适用于多数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);
})();

结果如下:澳门葡京 4

 

这不过是仅考虑一个成分的主干办法。更扑朔迷离的可能要求特地为其优化的代码。对于更扑朔迷离的拍录,你能够设想将动态模糊效果应用于多个目的,在未曾动画时禁用模糊和速度总括,等等。

到此处本课程就谢世了!
再说3次,请小心,那种效益说不定很成本财富,所以你应该幸免在巨型对象上使用它。

1 赞 4 收藏 3
评论

澳门葡京 5

2、defs & use

  • 实例1:不难组合

<defs>
  <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
</defs>
<use xlink:href="#rect1"/>
<use xlink:href="#rect1" x="110"/>

澳门葡京 6

骨干组成

  • 实例2:复杂组合

<defs>
    <g id="g1">
          <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
          <circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/>
    </g>
</defs>
<use xlink:href="#g1"/>
<use xlink:href="#rect1" x="110"/>
<use xlink:href="#circle1" x="210"/>

澳门葡京 7

复杂组合

  • 实例3:渐变

<defs>
   <linearGradient id="a1">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>
<rect x="50" y="250" width="100" height="100" stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
<circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a1)"></circle>
<rect x="290" y="250" width="100" height="100" stroke="url(#a1)" stroke-width="5" fill="none"></rect>

澳门葡京 8

渐变

  • 实例4:路径

<defs>
  <path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
</defs>
<text>
   <textPath xlink:href="#a1">这是随路径跑的文字,很酷吧
  </textPath>
</text>

澳门葡京 9

路径

  • 实例5:裁切

<defs>  
  <clipPath id="a1">
  <rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#a1)" fill="#000" />

澳门葡京 10

裁切

  • 实例6:遮罩

<defs>
  <mask id="mask1"> 
    <rect  x="50" y="50" width="100" height="100" fill="#ccc"/>
    <rect  x="150" y="150" width="50" height="50" fill="#fff"/>
  </mask> 
</defs>
  <rect id="box1" x="50" y="50" width="150" height="150" fill="#0f0"/>
  <rect id="box2" x="50" y="50" width="150" height="150" fill="#f00" mask="url(#mask1)"/>

澳门葡京 11

遮罩

  • 实例7:标志marker

<defs>
  <marker id="r" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
      <circle fill="#fff" stroke="#000" stroke-width="10" cx="25" cy="25" r="25"/>
  </marker>
    <marker id="g" viewBox="0 0 50 50" refX="25" refY="25" markerWidth="10" markerHeight="10" orient="45" >
      <rect fill="#0a0" width="50" height="50"/>
  </marker>
  <marker id="b" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
      <circle fill="#f99" stroke="#f00" stroke-width="10" cx="25" cy="25" r="25"/>
  </marker>
</defs>
<polyline points="20,100 50,100 80,20 110,80 140,30 170,100 200,100" fill="none" stroke="black" stroke-width="1" marker-end="url(#b)" marker-start="url(#r)" marker-mid="url(#g)"></polyline>

澳门葡京 12

marker

  • 实例8:滤镜

<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />

澳门葡京 13

滤镜

3、控制svg

  • CSS 方式
    svg元素和html成分一样,都可以用class属性添加类名来决定样式,只是对于svg成分而言,可决定的体制较少,常见的有fill,stroke,stroke-width
    ,opacity以及transform,看二个事例:

    //定义区
    <svg>
      <symbol id="ic"> 
          <path fill="#000" d="..."/> 
      </symbol> 
    </svg>
    //使用区
    <svg class="icon" viewBox="0 0 100 125"> 
       <use class="ic-1" xlink:href="#ic" x="0" y="0" /> 
    </svg> 
    <svg class="icon" viewBox="0 0 100 125">
       <use class="ic-2" xlink:href="#ic" x="0" y="0" />
    </svg>
    //定义样式
    .icon { width: 100px; height: 125px; }
    use.ic-1 { fill: skyblue; } 
    use.ic-2 { fill: #FDC646; }
    svg path { fill: inherit; }    //防止.ic-1,.ic-2设置的fill被path覆盖
    

澳门葡京 14

symbol成分和defs几乎,都以用来整合成分的,但symbol越来越多的用于单个图标的组合

  • JS 方式
    要在SVG内动态新增<path>或<rect>等因素,要运用createElementNS,而不是createElement,因为svg和html不在同四个命名空间里。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
        <script type="text/javascript">
            function makeSVG(tag, attrs) {
                var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
                for (var k in attrs)
                    el.setAttribute(k, attrs[k]);
                return el;
            }
            var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
            document.getElementById('s').appendChild(circle);
        </script>
    </body>
    </html>
    

四 、svg最佳实践

在工作中svg使用最多的光景照旧当小图标使用,替换诸如纯图片、iconfont图标等方案。使用内联svg的优势在于:一 、少发3次http请求;② 、放大不会变形;三 、易于用JS控制,比iconfont更灵活。

至上做法(SVG sprite):

  • 一 、将拥有要求接纳的小图标统一定义在svg下,该svg要安装display:none,各种小图标用symbol包围,各种symbol取八个id,方便后续调用;
  • 贰 、使用svg+use的措施调用,use中用属性xlink:href=’#id’来引用相应图标,可以给每一个svg取四个类名,方便css和js动态控制;
  • 三 、通过getElementById的主意得到需求变更属性的use成分,为其动态拉长或删除相应的类名;
  • 四 、添加的类名最后是采用在symbol上,symbol中定义的图标(path)会覆盖类名中对应的品质,所以不用忘了安装symbol中成分的性质持续自symbol,就像是
    上例中:svg path { fill: inherit; };
  • 伍 、要想完结特别复杂的效益,如渐变等,可以行使defs;
  • 陆 、要想做动画效果,能够在css类名中控制opacity、transform、stroke-dasharray和stroke-dashoffset属性。

5、SVG动画

5.1 路径动画

途径动画基本是svg动画里最常用的了,其基本原理是动态改变stroke-dasharray和stroke-dashoffset属性的值:

澳门葡京 15

实例:

<body>
    <svg>
        <symbol viewBox="0 0 24 20" id="ic" xmlns="http://www.w3.org/2000/svg">
            <title>点赞前</title>
            <path d="M22.825 6.727a6.236 6.236 0 0 0-1.8-3.818A5.275 5.275 0 0 0 17.36 1.44a5.275 5.275 0 0 0-3.667 1.47A11.134 11.134 0 0 0 12 5.09a11.134 11.134 0 0 0-1.692-2.18A5.275 5.275 0 0 0 6.64 1.44a5.275 5.275 0 0 0-3.667 1.47 6.236 6.236 0 0 0-1.8 3.817c-.044.546-.1 2.095 1.236 4.364 2.584 4.364 7.655 6.802 9.59 7.636 1.935-.834 7.006-3.272 9.59-7.636 1.337-2.27 1.28-3.83 1.235-4.364z" stroke="#454545" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <svg class="icon" viewBox="0 0 100 125">
        <use class="ic-1" xlink:href="#ic" x="0" y="0" />
    </svg>
</body>

    svg.icon {
        width: 120px;
        height: 135px;
    }
    use.ic-1 {
        stroke: gray;
        fill: gray;
        animation: move 3s linear forwards;
    }
    @keyframes move {
        0% {
            stroke-dasharray: 30px, 30px;
        }
        100% {
            stroke-dasharray: 30px, 0px;
        }
    }
    svg path {
        fill: inherit;
        stroke: inherit;
    }

效益就是stroke从30px长和30px空白逐步变得没有空白

5.2 SMIL动画(2018/1/1更新)

上述动画格局连接要求依靠css来落到实处,其实svg专门有做动画的要素
先看运动端包容性:

澳门葡京 16

SVG SMIL animation

  • set
    在特定时刻未来修改有个别属性值
    用法:

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      马
      <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </text>
  </g>
</svg>

那几个「马」会在3秒以后从横坐标160的地点移动60这些岗位(眨眼间移,无动画效果)

  • animate
    贯彻单属性(不含有css的transform)的动画过渡效果

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
    马
      <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
  </g>
</svg>
  • animateTransform
    专用于transform动画

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
  </g>
</svg>
  • animateMotion
    专用于复杂的路径动画

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

5.3 小结

至于用svg做动画,更推荐用5.2的点子,并且5.2中animate的用法是最多的,animate成分还能够构成使用:

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

除此以外,svg动画还是可以手动控制(JS)动画的开头和刹车

// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations()

6、参考:

  • SVG Pepsi-Cola使用简介
  • SVG 探究之路 (18) – 再談
    defs
  • 最佳无敌的SVG SMIL
    animation动画详解
  • https://www.nihaoshijie.com.cn/index.php/archives/667/

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website