SVG 使用方式总结
- 十一月 10, 2019
- web前端
- 没有评论
线条之美,玩转SVG线条动画
2017/02/28 · HTML5 ·
SVG
原文出处:
AlloyTeam
通常来说web前端实现动画效果主要通过下面几种方案:
- css动画;利用css3的样式效果可以将dom元素做出动画的效果来。
- canvas动画;利用canvas提供的API,然后利用清除-渲染这样一帧一帧的做出动画效果。
- svg动画;同样svg也提供了不少的API来实现动画效果,并且兼容性也不差,本文主要讲解一下如何制作svg线条动画。
先来看几个效果:
demo
demo
demo
以上这些效果都是利用SVG线条动画实现的,只用了css3和svg,没有使用一行javascript代码,这一点和canvas比起来要容易一些,下面就说明一下实现这些效果的原理。
关于SVG的基础知识,我这里就不再叙述了,大家可以直接在文档中查看相关的API,这里只说一下实现线条动画主要用到的:path
(路径)
实际工作中,SVG大多数是用<svg>+<defs></defs>(或者symbol)+<use></use>+</svg>的组合来使用的,defs
顾名思义就是「definitions」定义,我们可以把许多重复性质高的元素,放入defs
元素内,让它变成一个可以重复利用的物件。而symbol更多的只是包含单个图标。
地铁上逛segmentfault看到一篇用纯css和SVG来实现的很赞的效果,觉得拿来做一些开场效果动画应该不错。
<path> 标签命令
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
利用path的这些命令我们可以实现我们想要的任何线条组合,以一段简单的线条为例:
XHTML
<path id=”path” fill=”none” stroke=”#000″ stroke-width=”1px”
d=”M452,293c0,0,0-61,72-44c0,0-47,117,81,57
s5-110,10-67s-51,77.979-50,33.989″/>
1
2
|
<path id="path" fill="none" stroke="#000" stroke-width="1px" d="M452,293c0,0,0-61,72-44c0,0-47,117,81,57
s5-110,10-67s-51,77.979-50,33.989"/>
|
效果:
呵呵,看起来很简单,但是,如何让这个线条动起来呢?这里就要明白到SVG里的path的一些主要属性:
- stroke:标识路径的颜色;
- d:标识路径命令的集合,这个属性主要决定了线条的形状。
- stroke-width:标识路径的宽度,单位是px;
- stroke-dasharray:它是一个<length>和<percentage>数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2等同于5,3,2,5,3,2;
- stroke-dashoffset:标识的是整个路径的偏移值;
以一张图来解释stroke-dasharray和stroke-dashoffset更容易理解一些:
因此,我们之前的路径就会变成这个样子:
CSS
#path { stroke-dasharray: 3px, 1px; stroke-dasharray: 0; }
1
2
3
4
|
#path {
stroke-dasharray: 3px, 1px;
stroke-dasharray: 0;
}
|
效果:
理解了stroke-dasharray的作用之后,下面我们就可以使用css3的animation来让这个路径动起来。
Sass
#path { animation: move 3s linear forwards; } @keyframes move {
0%{ stroke-dasharray: 0, 511px; } 100%{
stroke-dasharray: 511px, 511px; } }
1
2
3
4
5
6
7
8
9
10
11
12
|
#path {
animation: move 3s linear forwards;
}
@keyframes move {
0%{
stroke-dasharray: 0, 511px;
}
100%{
stroke-dasharray: 511px, 511px;
}
}
|
效果:
511这个值是整个路径的长度,可以用js的document.getElementById(‘path’).getTotalLength()得到
stroke-dasharray: 0, 511; 表示实线和空隙的长度分别为 0 和
511,所以一开始整个路径都是空隙,所以是空的。
然后过渡到 stroke-dasharray: 511, 511; 因为整个线条的长度就是
511,而实线的长度也慢慢变成511,所以整个线条就出现了。
同样利用stroke-dashoffset也可以实现这个效果,原理就是最初线条分为511实线,和511空隙,但是由于设置了offset使线条偏移不可见了,当不断修改offset后,线条慢慢出现。
Sass
#path { animation: move 3s linear forwards; stroke-dasharray:
511px,511px; } @keyframes move { 0%{ stroke-dashoffset: 511px;
} 100%{ stroke-dashoffset: 0; } }
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#path {
animation: move 3s linear forwards;
stroke-dasharray: 511px,511px;
}
@keyframes move {
0%{
stroke-dashoffset: 511px;
}
100%{
stroke-dashoffset: 0;
}
}
|
效果:
当我们掌握了上述的方法后,整个利用SVG实现线条动画的原理就已经清楚了,我们需要的就是一个SVG路径了,但是总画一些简单的线条还是不美啊,那我们如何才能得到复杂的svg路径呢?
- 找UI设计师要一个。
- 自己利用PS和AI做一个,只需要简单的2步。
以部落LOGO为例:
1,得到部落LOGO的png图片。
2,右键图层,然后点击从选区生成工作路径,我们就可以得到:
3,文件–导出–路径到AI,将路径导出在AI里面打开。
4,在AI里面选择保存成svg格式的文件,然后用sublime打开svg文件,将path的d拷贝出来即可。
5,利用上文介绍的实现动画的方法,我们就可以轻松的得到了下面这个效果。
线条动画进阶:
可以看到上面的动画效果和文章最初显示的动画效果还是有区别的,要想实现文章最初的动画效果,需要用到SVG的<symbol>
和 <use>来实现,读者可以在网上查一下这两个标签的用法。
XHTML
<symbol id=”pathSymbol”> <path class=”path” stroke=”#00adef”
d=”M281.221,261.806c0,2.756-2.166,4.922-4.922,4.922l0,0h-33.964c-11.715-24.119-31.503-59.855-47.156-68.026
c-15.751,7.974-35.637,43.907-47.451,68.026h-33.865l0,0c-2.756,0-4.922-2.166-4.922-4.922l0,0l0,0c0-0.295,0-0.689,0.098-0.984
c0,0,14.078-69.109,79.15-129.161c-2.953-2.56-5.907-5.119-8.959-7.58c-1.87-1.575-2.166-4.233-0.591-6.104
c1.575-1.772,4.43-2.166,6.497-0.689c3.347,2.461,6.694,5.218,9.746,8.073c3.15-2.953,6.497-5.71,10.041-8.368
c2.067-1.378,4.922-1.083,6.497,0.689c1.575,1.87,1.28,4.529-0.591,6.104c-3.052,2.56-6.104,5.218-9.155,7.876
c65.27,59.953,79.446,129.161,79.446,129.161C281.221,261.117,281.221,261.412,281.221,261.806L281.221,261.806L281.221,261.806z”/>
<path class=”path” stroke=”#00adef”
d=”M194.589,212.583h0.984l0,0c19.886,28.451,31.503,54.145,31.503,54.145h-63.99C163.086,266.728,174.703,241.034,194.589,212.583
L194.589,212.583z”/> </symbol> <g> <use
xlink:href=”#pathSymbol” id=”path1″></use> <use
xlink:href=”#pathSymbol” id=”path2″></use> </g>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<symbol id="pathSymbol">
<path class="path" stroke="#00adef" d="M281.221,261.806c0,2.756-2.166,4.922-4.922,4.922l0,0h-33.964c-11.715-24.119-31.503-59.855-47.156-68.026
c-15.751,7.974-35.637,43.907-47.451,68.026h-33.865l0,0c-2.756,0-4.922-2.166-4.922-4.922l0,0l0,0c0-0.295,0-0.689,0.098-0.984
c0,0,14.078-69.109,79.15-129.161c-2.953-2.56-5.907-5.119-8.959-7.58c-1.87-1.575-2.166-4.233-0.591-6.104
c1.575-1.772,4.43-2.166,6.497-0.689c3.347,2.461,6.694,5.218,9.746,8.073c3.15-2.953,6.497-5.71,10.041-8.368
c2.067-1.378,4.922-1.083,6.497,0.689c1.575,1.87,1.28,4.529-0.591,6.104c-3.052,2.56-6.104,5.218-9.155,7.876
c65.27,59.953,79.446,129.161,79.446,129.161C281.221,261.117,281.221,261.412,281.221,261.806L281.221,261.806L281.221,261.806z"/>
<path class="path" stroke="#00adef" d="M194.589,212.583h0.984l0,0c19.886,28.451,31.503,54.145,31.503,54.145h-63.99C163.086,266.728,174.703,241.034,194.589,212.583
L194.589,212.583z"/>
</symbol>
<g>
<use xlink:href="#pathSymbol"
id="path1"></use>
<use xlink:href="#pathSymbol"
id="path2"></use>
</g>
|
Sass
#path1 { stroke-dashoffset: 7% 7%; stroke-dasharray: 0 35%; animation:
animation 3s linear forwards; } @keyframes animation { 100% {
stroke-dasharray: 7% 7%; stroke-dashoffset: 7%; } } #path2 {
stroke-dashoffset: 7% 7%; stroke-dasharray: 0 35%; animation: animation2
3s linear forwards; } @keyframes animation2 { 100% { stroke-dasharray:
7% 7%; stroke-dashoffset: 14%; } }
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
|
#path1 {
stroke-dashoffset: 7% 7%;
stroke-dasharray: 0 35%;
animation: animation 3s linear forwards;
}
@keyframes animation {
100% {
stroke-dasharray: 7% 7%;
stroke-dashoffset: 7%;
}
}
#path2 {
stroke-dashoffset: 7% 7%;
stroke-dasharray: 0 35%;
animation: animation2 3s linear forwards;
}
@keyframes animation2 {
100% {
stroke-dasharray: 7% 7%;
stroke-dashoffset: 14%;
}
}
|
思路就是:
1,将原来只有一条path的路径替换成两条,并且这两条的路径是完全重合的。
2,分别设置两条路径的stroke-dasharray和stroke-dashoffset的css3的animation动画,注意两条路径的动画不能完全一样要有差值。
3,设置成功之后就可以利用animation动画触发的时机和改变程度来实现多条动画效果。
效果:
那么如何实现alloyteam的文字动画呢,其实原理也是利用了stroke-dasharray和stroke-dashoffset,这两个属性不仅可以作用在<path>上,同样可以作用在<text>上。
XHTML
<symbol id=”text”> <text x=”30%” y=”35%”
class=”text”>QQ</text> </symbol> <g> <use
xlink:href=”#text” class=”use-text”></use> <use
xlink:href=”#text” class=”use-text”></use> <use
xlink:href=”#text” class=”use-text”></use> <use
xlink:href=”#text” class=”use-text”></use> <use
xlink:href=”#text” class=”use-text”></use> </g>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<symbol id="text">
<text x="30%" y="35%" class="text">QQ</text>
</symbol>
<g>
<use xlink:href="#text"
class="use-text"></use>
<use xlink:href="#text"
class="use-text"></use>
<use xlink:href="#text"
class="use-text"></use>
<use xlink:href="#text"
class="use-text"></use>
<use xlink:href="#text"
class="use-text"></use>
</g>
|
Sass
.use-text:nth-child(1) { stroke: #360745; animation: animation1 8s
infinite ease-in-out forwards; } .use-text:nth-child(2) { stroke:
#D61C59; animation: animation2 8s infinite ease-in-out forwards; }
.use-text:nth-child(3) { stroke: #E7D84B; animation: animation3 8s
infinite ease-in-out forwards; } .use-text:nth-child(4) { stroke:
#EFEAC5; animation: animation4 8s infinite ease-in-out forwards; }
.use-text:nth-child(5) { stroke: #1B8798; animation: animation5 8s
infinite ease-in-out forwards; } @keyframes animation1 { 50%{
stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; } 70%{
stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; } } @keyframes
animation2 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; }
70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; } } @keyframes
animation3 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; }
70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; } } @keyframes
animation4 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; }
70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; } } @keyframes
animation5 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; }
70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; } }
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
.use-text:nth-child(1) {
stroke: #360745;
animation: animation1 8s infinite ease-in-out forwards;
}
.use-text:nth-child(2) {
stroke: #D61C59;
animation: animation2 8s infinite ease-in-out forwards;
}
.use-text:nth-child(3) {
stroke: #E7D84B;
animation: animation3 8s infinite ease-in-out forwards;
}
.use-text:nth-child(4) {
stroke: #EFEAC5;
animation: animation4 8s infinite ease-in-out forwards;
}
.use-text:nth-child(5) {
stroke: #1B8798;
animation: animation5 8s infinite ease-in-out forwards;
}
@keyframes animation1 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 7%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 7%;
}
}
@keyframes animation2 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 14%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 14%;
}
}
@keyframes animation3 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 21%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 21%;
}
}
@keyframes animation4 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 28%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 28%;
}
}
@keyframes animation5 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 35%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 35%;
}
}
|
这里用了5条完全重合的路径,并且每个路径的颜色和动画效果都不一样。
效果:
开启愉快的svg线条之旅吧!
参考资料:
1 赞 1 收藏
评论
1、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>

</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>
原文地址:
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"/>
基本组合
- 实例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"/>
复杂组合
- 实例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>
渐变
- 实例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>
路径
- 实例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" />
裁切
- 实例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)"/>
遮罩
- 实例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>
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") />
滤镜
觉得很有趣,正好925快到了,就撸了一个生日快乐的
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覆盖
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>
效果图如下:
4、svg最佳实践
在工作中svg使用最多的场景还是当小图标使用,替换诸如纯图片、iconfont图标等方案。使用内联svg的优势在于:1、少发一次http请求;2、放大不会变形;3、易于用JS控制,比iconfont更灵活。
最佳做法(SVG sprite):
- 1、将所有需要用到的小图标统一定义在svg下,该svg要设置display:none,每个小图标用symbol包围,每个symbol取一个id,方便后续调用;
- 2、使用svg+use的方式调用,use中用属性xlink:href=’#id’来引用相应图标,可以给每个svg取一个类名,方便css和js动态控制;
- 3、通过getElementById的方式获取需要改变属性的use元素,为其动态添加或删除相应的类名;
- 4、添加的类名最终是运用在symbol上,symbol中定义的图标(path)会覆盖类名中对应的属性,所以不要忘了设置symbol中元素的属性继承自symbol,就像
上例中:svg path { fill: inherit; }; - 5、要想实现更为复杂的效果,如渐变等,可以使用defs;
- 6、要想做动画效果,可以在css类名中控制opacity、transform、stroke-dasharray和stroke-dashoffset属性。
5、SVG动画
5.1 路径动画
路径动画基本是svg动画里最常用的了,其基本原理是动态改变stroke-dasharray和stroke-dashoffset属性的值:
实例:
<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空白逐渐变得没有空白
就像是一圈圈蚂蚁在它身上爬。。。。。emmmmm奇特的比喻
5.2 SMIL动画(2018/1/1更新)
以上动画方式总是需要借助css来实现,其实svg专门有做动画的元素
先看移动端兼容性:
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>
fill:none;可以让图形不被填充,如果不添加这一属性,则默认填充颜色是black,这个效果
No Comments, Be The First!