简单的SVG线条动画,线条动画入门

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

2017/02/28 · HTML5 ·
SVG

原来的小说出处:
AlloyTeam   

万般来说web前端达成动画效果首要通过上面两种方案:

  • css动画;利用css叁的体裁效果能够将dom元素做出动画的成效来。
  • canvas动画;利用canvas提供的API,然后利用清除-渲染那样1帧一帧的做出动画效果。
  • svg动画;同样svg也提供了无数的API来兑现动画效果,并且包容性也不差,本文重要助教一下哪些制作svg线条动画。

先来看多少个职能:

澳门葡京国际 1demo

澳门葡京国际 2demo

澳门葡京国际 3demo

如上这几个作用都是运用SVG线条动画完毕的,只用了css3和svg,未有动用壹行javascript代码,那或多或少和canvas比起来要便于一些,下边就印证一下跌成这一个效应的原理。

至于SVG的基础知识,小编那边就不再叙述了,大家能够间接在文书档案中查阅相关的API,那里只说一降低实线条动画重要使用的:path
(路径)

[TOC]

SVG 线条动画入门

2016/12/29 · HTML5 ·
SVG,
动画

本文小编: 伯乐在线 –
chokcoco
。未经俺许可,禁止转发!
欢迎参与伯乐在线 专辑撰稿人。

一般而言我们说的 Web 动画,包蕴了三大类。

  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

村办觉得 3种动画各有优劣,实际行使中依照通晓景况作出选拔,本文研讨的是本人觉着 SVG
中在实际项目中那一个有使用价值 SVG 线条动画。

数见不鲜我们说的 Web
动画,包罗了三大类。

<path> 标签命令

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • 简单的SVG线条动画,线条动画入门。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如出1辙五,三,二,5,三,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的功用之后,上面大家就能够行使css三的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

51壹这么些值是任何路径的尺寸,能够用js的document.getElementById(‘path’).getTotalLength()得到

stroke-dasharray: 0, 511; 表示实线和空隙的长度分别为 0 和
511,所以一伊始全方位路径都以空隙,所以是空的。
然后对接到 stroke-dasharray: 51一, 51一; 因为全部线条的尺寸正是51一,而实线的尺寸也日趋成为51一,所以总体线条就应运而生了。

同样使用stroke-dashoffset也能够兑现这几个作用,原理正是最初线条分为51一实线,和51一空当,但是由于设置了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设计师要3个。
  2. 和谐使用PS和AI做1个,只须求简单的二步。

澳门葡京国际 9

以部落LOGO为例:

一,获得部落LOGO的png图片。

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

澳门葡京国际 10

三,文件–导出–路径到AI,将路径导出在AI里面打开。

澳门葡京国际 11

肆,在AI里面选取保存成svg格式的文本,然后用sublime打开svg文件,将path的d拷贝出来即可。

伍,利用上文介绍的贯彻动画的主意,大家就足以轻松的拿到了下边那几个作用。

澳门葡京国际 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%;
      }
}

思路就是:

壹,将本来只有一条path的途径替换来两条,并且那两条的路径是完全重叠的。

2,分别设置两条路径的stroke-dasharray和stroke-dashoffset的css三的animation动画,注意两条路线的动画不能够一心一样要有差值。

三,设置成功今后就能够选拔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条完全重合的不2法门,并且种种路径的颜料和动画片效果都分歧。

效果:

澳门葡京国际 14

 

打开欢悦的svg线条之旅吧!

 

参考资料:

1 赞 1 收藏
评论

澳门葡京国际 15

德姆o项目下载

举个栗子

SVG 线条动画,在1部分特定的场馆下得以缓解采用 CSS
不只怕做到的动画片。尤其是在进度条方面,看看近来项目里的3个小须求,3个那种形象的进度条:

澳门葡京国际 16

把里面包车型大巴进度条单独拿出去,约等于须求贯彻这样一个效益:

澳门葡京国际 17

脑洞大开一下,使用 CSS三 怎么样促成如此2个进程条呢。

CSS三 是能够完毕的,正是很辛勤。可是一旦应用 SVG 的话,一蹴即至。

See the Pen 尴尬进程条 by
Chokcoco (@Chokcoco) on
CodePen.

我们借使你在读书本文的时候有了迟早的 SVG
基础,上面代码看看就懂了,好了,本文到此结束。

澳门葡京国际 18

好啊,照旧一步一步解释,上边进程条的根本 SVG 代码如下:

<svg version=”1.1″ xmlns=””
xmlns:xlink=”” xml:space=”preserve”
class=”circle-load-rect-svg” width=”300″ height=”200″ viewbox=”0 0 600
400″> <polyline points=”5 5, 575 5, 575 200, 5 200″
class=”g-rect-path”/> <polyline points=”5 5, 575 5, 575 200, 5
200″ class=”g-rect-fill”/> </svg>

1
2
3
4
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>
  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

看来网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下;
先上几张图看看:

SVG 为何

可缩放矢量图形,即SVG,是W3C
XML的分枝语言之一,用于标记可缩放的矢量图形。(摘自MDN)

地方代码中,先谈谈 svg 标签:

  • version: 表示 “ 的本子,近期唯有 1.0,一.一 三种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述多少个值固定,表示命名空间,当数码单独存在svg文本内时,那3个值不能够不难
  • class:便是我们熟知的 class
  • width | height: 定义 svg 画布的轻重缓急
  • viewbox: 定义了画布上得以显得的区域,当 viewBox 的深浅和 svg
    不相同时,viewBox 在显示屏上的呈现会缩放至 svg
    同等大小(暂且能够毫不精通)

有了 svg 标签,大家就足以愉悦的在其间添加 SVG 图形了,上面,我在 svg 中定义了八个 polyline 标签。

私家认为 三种动画各有优劣,实际行使中依据明白景况作出接纳,本文探究的是自个儿觉得 SVG
中在实际项目中卓殊有选择价值 SVG 线条动画。

澳门葡京国际 19

SVG 基本造型

polyline:是SVG的1个主导造型,用来创建一文山会海直线连接五个点。

其实,polyline 是3个比较不常用的模样,相比常用的是pathrectcircle 等。那里笔者利用polyline 的来由是索要运用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处成立圆滑过渡角。

SVG
中定义了部分主导造型,在此起彼伏下文此前,提议点进去先驾驭部分中央图形的标签及写法:

澳门葡京国际 20

 

简易的线条动画

SVG 线条动画

好,终于到本文的严重性了。

澳门葡京国际 21

地点,我们给多少个 polyline 都设置了 class,SVG
图形的二个好处就是1些属性样式能够利用 CSS
的章程书写,更关键的是足以合作 CSS 动画1起利用。

上面,主要的 CSS 代码:

.g-rect-path{ fill: none; stroke-width:10; stroke:#d3dce6;
stroke-linejoin:round; stroke-linecap:round; } .g-rect-fill{ fill: none;
stroke-width:10; stroke:#ff7700; stroke-linejoin:round;
stroke-linecap:round; stroke-dasharray: 0, 1370; stroke-dashoffset: 0;
animation: lineMove 2s ease-out infinite; } @keyframes lineMove { 0%{
stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

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
.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
 
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
 
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

那尼玛是哪些
CSS?怎么除了 animation 全都不认识? 澳门葡京国际 22

莫慌,其实过多和 CSS 相比较一下格外好驾驭,只是换了个名字:

  • fill:类比 css 中的 background-color,给 svg 图形填充颜色;
  • stroke-width:类比 css
    中的 border-width,给 svg 图形设定边框宽度;
  • stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;
  • stroke-linejoin | stroke-linecap:上文稍微提到过,设定线段连接处的样式;
  • stroke-dasharray:值是1组数组,没多少上限,各种数字交替表示划线与间隔的增长幅度;
  • stroke-dashoffset:则是虚线的偏移量

驷不比舌讲讲能够落到实处线条动画的最主要属性 stroke-dasharray 。

属性 stroke-dasharray 可操纵用来描边的点划线的图画范式。

它是2个和数列,数与数里面用逗号也许空白隔开分离,内定短划线和缺口的长短。要是提供了奇数个值,则那么些值的数列重复3回,从而成为偶数个值。因而,5,3,2等同于5,3,2,5,3,2

表达很苍白,直接看例子:

See the Pen stroke-dasharray
by Chokcoco (@Chokcoco) on
CodePen.

上边,填充进程条,使用了上面这些动画 :

@keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{
stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

stroke-dasharray: 0, 1350;,表示线框短划线和缺口的尺寸分别为 0 和
1350,所以1初步全方位图形都是被缺口占据,所以在视觉效果上长度为 0。

然后对接到 stroke-dasharray: 1350, 1350,表示线框短划线和缺口的长度分别为
1350 和 1350,因为整个图形的尺寸正是1350,所以总体进程条会被稳步填充满。

控制了这么些技能后,就足以行使 stroke-dasharray 和 stroke-dashoffset 制作很多不错的相互场景:

举个栗子

SVG
线条动画,在部分特定的场馆下得以消除选用 CSS
无法做到的动画。尤其是在进程条方面,看看如今项目里的三个小要求,二个这种形态的进程条:

澳门葡京国际 23

把里面包车型地铁进程条单独拿出去,也正是须要完成那样三个效率:

澳门葡京国际 24

脑洞大开一下,使用
CSS三 怎样促成如此1个进度条呢。

CSS3是能够做到的,就是很艰难。不过1旦采纳 SVG 的话,一下子就解决了。

咱俩只要你在读书本文的时候有了一定的
SVG 基础,上面代码看看就懂了,好了,本文到此结束。

澳门葡京国际 25

行吗,照旧一步一步解释,上面进度条的重点
SVG 代码如下:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

相关文章