图片 27

SVG霓虹灯效果,玩转SVG线条动漫

线条之美,玩转SVG线条动漫

2017/02/28 · HTML5 ·
SVG

初藳出处:
AlloyTeam   

常备来说web前端完结动漫效果首要通过上面二种方案:

  • css动漫;利用css3的样式效果能够将dom成分做出动画的作用来。
  • canvas动漫;利用canvas提供的API,然后使用灭亡-渲染那样风度翩翩帧风姿洒脱帧的做出动漫效果。
  • svg动漫;相通svg也提供了多数的API来达成动漫效果,並且包容性也不差,本文首要讲授一下什么样制作svg线条动漫。

先来看多少个效率:

图片 1demo

图片 2demo

图片 3demo

如上那个职能都以采取SVG线条动漫达成的,只用了css3和svg,未有行使后生可畏行javascript代码,那或多或少和canvas比起来要轻便一些,上面就证实一下跌实那几个意义的原理。

有关SVG的功底知识,小编这里就不再陈诉了,咱们能够一向在文书档案中查阅相关的API,这里只说一下跌实线条动画首要利用的:path
(路线卡塔 尔(阿拉伯语:قطر‎

骨子里专门的工作中,SVG大繁多是用<svg>+<defs></defs>(可能symbol卡塔尔+<use></use>+</svg>的咬合来利用的,defs
看名就能够猜到其意义正是「definitions」定义,大家能够把大多再度性质高的要素,放入defs
成分内,让它变成一个能够再一次使用的物件。而symbol更加的多的只是带有单个Logo。

地铁上逛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"/>

效果:

图片 4

呵呵,看起来异常的粗略,不过,如何让那一个线条动起来呢?这里将要领悟到SVG里的path的局地最首要质量:

  1. stroke:标志路线的颜色;
  2. d:标志路线命令的汇集,那个天性主控了线条的形制。
  3. stroke-width:标记路线的宽度,单位是px;
  4. stroke-dasharray:它是二个<length>和<percentage>数列,数与数以内用逗号或然空白隔绝,钦赐短划线和缺口的长度。即使提供了奇数个值,则这么些值的数列重复一次,进而成为偶数个值。由此,5,3,2如出意气风发辙5,3,2,5,3,2;
  5. stroke-dashoffset:标志的是整套路径的偏移值;

以一张图来阐明stroke-dasharray和stroke-dashoffset更便于明白一些:

图片 5

据此,大家事先的门路就能够成为这些样子:

CSS

#path { stroke-dasharray: 3px, 1px; stroke-dasharray: 0; }

1
2
3
4
#path {
        stroke-dasharray: 3px, 1px;
        stroke-dasharray: 0;
}

效果:

图片 6

明亮了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;
      }
}

效果:

图片 7

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;
  }
}

效果:

图片 8

当我们驾驭了上述的法子后,整个利用SVG完结线条动漫的规律就已经通晓了,我们须求的正是叁个SVG路线了,然则总画一些简便的线条照旧不美啊,那我们什么手艺获取复杂的svg路线呢?

  1. 找UI设计员要三个。
  2. 投机使用PS和AI做二个,只必要轻便的2步。

图片 9

以部落LOGO为例:

1,拿到部落LOGO的png图片。

2,右键图层,然后点击从选区生成工作路径,大家就足以赢得:

图片 10

3,文件–导出–路线到AI,将路线导出在AI里面张开。

图片 11

4,在AI里面选拔保存成svg格式的公文,然后用sublime打开svg文件,将path的d拷贝出来就能够。

5,利用上文介绍的完毕动漫的格局,大家就足以轻巧的拿到了上边那么些职能。

图片 12

线条动漫进级:

能够看出地点的卡通效果和作品最早显示的动漫效果依然有分其余,要想完毕作品最早的卡通片效果,要求用到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动漫触发的机会和改动程度来兑现多条动画效果。

效果:

图片 13

那么哪些兑现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条完全重合的不二诀要,而且每一种路线的颜料和动漫片效果都不雷同。

效果:

图片 14

 

翻开欢跃的svg线条之旅吧!

 

参谋资料:

1 赞 1 收藏
评论

图片 15

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>
         ![](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>

原稿地址:

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"/>

图片 16

着力组成

  • 实例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"/>

图片 17

复杂组合

  • 实例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>

图片 18

渐变

  • 实例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>

图片 19

路径

  • 实例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" />

图片 20

裁切

  • 实例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)"/>

图片 21

遮罩

  • 实例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>

图片 22

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") />

图片 23

滤镜

感觉很有趣,正巧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覆盖
    

图片 24

symbol成分和defs大约,都是用来组合成分的,但symbol更加多的用来单个Logo的组成

  • 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使用最多的现象还是当小Logo使用,替换诸如纯图片、iconfontLogo等方案。使用内联svg的优势在于:1、少发贰次http央浼;2、放大不会变形;3、易于用JS调整,比iconfont越来越灵敏。

精品做法(SVG sprite):

  • 1、将具有须要利用的小Logo统一定义在svg下,该svg要安装display:none,各个小Logo用symbol包围,每一个symbol取三个id,方便后续调用;
  • 2、使用svg+use的措施调用,use中用属性xlink:href=’#id’来引用相应Logo,能够给各类svg取叁个类名,方便css和js动态调节;
  • 3、通过getElementById的主意获得需求转移属性的use成分,为其动态增进或删除相应的类名;
  • 4、增多的类名最后是应用在symbol上,symbol中定义的Logo(path卡塔 尔(英语:State of Qatar)会覆盖类名中对应的属性,所以实际不是忘了设置symbol兰月素的质量持续自symbol,就疑似
    上例中:svg path { fill: inherit; };
  • 5、要想达成越发复杂的作用,如渐变等,能够选拔defs;
  • 6、要想做动漫效果,能够在css类名中央调控制opacity、transform、stroke-dasharray和stroke-dashoffset属性。

图片 25

5、SVG动画

 

5.1 路线动漫

门路动画基本是svg动漫里最常用的了,其基本原理是动态退换stroke-dasharray和stroke-dashoffset属性的值:

图片 26

实例:

<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特地有做动漫的因素
先看运动端宽容性:

图片 27

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,那几个效应

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()

发掘stroke这一文山会海属性都很风趣呀,填充啊折射率和stroke-linecap,不过这几个效能用的最多的要么stroke-dasharray和stroke-dashoffset。

6、参考:

  • SVG Sprite使用简介
  • SVG 商讨之路 (18) – 再談
    defs
  • 拔尖无敌的SVG SMIL
    animation动漫精解
  • https://www.nihaoshijie.com.cn/index.php/archives/667/

借鉴解释:

  • stroke-miterlimit 表示描边相交(锐角卡塔尔的变现方式。暗中认可大小是4.
    什么斜角转斜面包车型地铁角度损耗之类的乐趣,值越大,损耗越小。具体干嘛的,小编要好也不分明。我们可查看别的材质。
  • stroke-dasharray 表示虚线描边。可选值为:none<dasharray>inherit.
    其中,none代表不是虚线;<dasharray>为四个逗号或空格分隔的数值列表。表示各类虚线端的长度。能够是定位的长度值,也能够是百分比率;inherit表继承。
  • stroke-dashoffset 表示虚线的起初偏移。可选值为:<percentage><length>inherit.
    百分比率,长度值,世襲。
  • stroke-opacity 表示描边折射率。暗中同意是1.

特地佩性格很顽强在艰难险阻或巨大压力面前不屈小编列举的三个鲜活形象的事例:

黄金年代根火朣肠12分米,要在上边画虚线,虚线间距有15分米,若无dashoffset,则火朣肠前边15毫米会被蒜蓉覆盖!实际上只有12分米,由此,大家来看的是任何火朣肠都有蒜末。未来,dashoffset也是15毫米,也正是虚线要未来偏移15毫米,结果,蒜蓉辣酱要抹在火腿肠之外,也正是火朣肠上怎么样花生酱也未有。假使换到地点的直线SVG,也便是直线看不见了。我们把dashoffset值渐渐变小,则会发觉,火腿肠上的芝麻酱一点一点面世了,好像沙拉酱从火朣肠根部涂抹上去同样。

 

<style type=”text/css”>
body{
background-color: #00688B;
}
.text{
font-size: 64px;
font-weight: normal;
text-transform: uppercase;

fill:none;
stroke: #B0E0E6;
stroke-width: 2px;
/stroke-dasharray: 90 310;

animation: stroke 6s infinite linear;
}

.text-1{
stroke: #FFEC8B;
animation-delay:-1.5s;
text-shadow:5px 5px 5px #FFEC8B;
}
.text-2{
stroke:#AEEEEE;
animation-delay:-3s;
text-shadow:5px 5px 5px #7FFFD4;
}
.text-3{
stroke:#EEE0E5;
animation-delay:-4.5s;
text-shadow:5px 5px 5px #7FFFD4;
}
.text-4{
stroke:#FFC1C1;
animation-delay:-6s;
text-shadow:5px 5px 5px #7FFFD4;
}
@keyframes stroke {
to {
stroke-dashoffset: -400;
}
}

</style>

<svg width=”100%” height=”100″>
<text text-anchor=”middle” x=”50%” y=”50%” class=”text text-1″ >
Happy birthday to you❤
</text>
<text text-anchor=”middle” x=”50%” y=”50%” class=”text text-2″ >
Happy birthday to you❤
</text>
<text text-anchor=”middle” x=”50%” y=”50%” class=”text text-3″ >
Happy birthday to you❤
</text>
<text text-anchor=”middle” x=”50%” y=”50%” class=”text text-4″ >
Happy birthday to you❤
</text>
</svg>

 

只须求用到svg里面包车型地铁描边(stroke)和填充(fill)就足以达到。数值各个花样调节和测量试验有悲喜!✿✿ヽ(°▽°)ノ✿

放上一些SVG基本功知识的链接以供我们参照他事他说加以调查:

 

发表评论

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