ag视讯直播一个事例上手 SVG 动画

作者:信息技术

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

2017/02/28 · HTML5 · SVG

最先的小讲出处: AlloyTeam   

普普通通来讲web前端完成动画效果首要透过下边两种方案:

  • css动画;利用css3的体裁效果能够将dom成分做出动画的机能来。
  • canvas动画;利用canvas提供的API,然后利用清除-渲染那样一帧一帧的做出动画效果。
  • svg动画;一样svg也提供了重重的API来完毕动画效果,而且兼容性也不差,本文首要教学一下怎样创设svg线条动画。

先来看多少个功效:

ag视讯直播 1demo

ag视讯直播 2demo

ag视讯直播 3demo

以上那个效用都是利用SVG线条动画达成的,只用了css3和svg,未有应用一行javascript代码,那一点和canvas比起来要容易一些,下边就证实一下降实这么些成效的规律。

有关SVG的基础知识,小编这里就不再叙述了,大家能够平昔在文书档案中查六柱预测关的API,这里只说一下贯彻线条动画主要选用的:path (路线)

实则工作中,SVG大相当多是用<svg>+<defs></defs>(可能symbol)+<use></use>+</svg>的三结合来使用的,defs 从名称想到所包含的意义正是「definitions」定义,我们得以把众多双重性质高的要素,放入defs 成分内,让它成为贰个足以另行利用的物件。而symbol越来越多的只是蕴含单个Logo。

一个事例上手 SVG 动画

2017/05/05 · HTML5 · SVG

原来的书文出处: 坑坑洼洼实验室   

CSS3动画已丰富强盛,然而依旧有一点点它做不到的地点。同盟SVG,让Web动作效果有越来越多的大概性。此次要做的作用是三个loading动画(如图):当中旋转通过CSS来成功,可是旋转之后圆弧降低形成笑貌的嘴巴须要依赖SVG来完毕。

ag视讯直播 4

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

效果:

ag视讯直播 5

呵呵,看起来一点也不细略,然而,怎么着让那个线条动起来吧?这里就要懂获得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更易于精通一些:

ag视讯直播 6

故此,我们事先的渠道就能够形成这么些样子:

CSS

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

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

效果:

ag视讯直播 7

知情了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;
      }
}

效果:

ag视讯直播 8

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

效果:

ag视讯直播 9

当大家驾驭了上述的章程后,整个利用SVG完结线条动画的法则就曾经驾驭了,大家需求的就是三个SVG路线了,不过总画一些简易的线条依然不美啊,这我们怎么本事收获复杂的svg路线呢?

  1. 找UI设计员要三个。
  2. 友好行使PS和AI做一个,只必要简单的2步。

ag视讯直播 10

以部落LOGO为例:

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

2,右键图层,然后点击从选区生成工作路径,我们就能够赢得:

ag视讯直播 11

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

ag视讯直播 12

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

5,利用上文介绍的落到实处动画的办法,我们就可以轻便的获得了下边那个功用。

ag视讯直播 13

线条动画进级:

能够观看地点的卡通片效果和小说最早展现的动画片效果依然有分其他,要想实现文章最早的动画效果,要求用到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动画触发的机缘和转移程度来兑现多条动画效果。

效果:

ag视讯直播 14

那正是说什么样实现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条完全重叠的门径,并且每个路线的颜料和卡通片效果都不等同。

效果:

ag视讯直播 15

 

敞开兴奋的svg线条之旅吧!

 

参照他事他说加以考察资料:

1 赞 1 收藏 评论

ag视讯直播 16

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>

Step1、声明SVG视口

XHTML

<svg width="100" height=“100”></svg>

1
<svg width="100" height=“100”></svg>

钦命三个宽高都为100像素的区域,width=”100”和width=”100px”是等价的,当然也得以采纳任何的官方单位,举例cm、mm、em等

翻阅器会设置贰个暗中同意的坐标种类,见图:左上角为原点,此中国水力电力对跨国公司业平(x)坐标向右递增,垂直(y)坐标向下递增。

ag视讯直播 17

在一向不点名的情形下,全数的的数值暗中认可单位都是像素。

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

ag视讯直播 18

基本构成

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

ag视讯直播 19

复杂组合

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

ag视讯直播 20

渐变

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

ag视讯直播 21

路径

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

ag视讯直播 22

裁切

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

ag视讯直播 23

遮罩

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

ag视讯直播 24

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

ag视讯直播 25

滤镜

Step2、绘制购物袋

购物袋由两个部分组成,先画下面的主体:

XHTML

<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />

1
<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />

别的模样都能够应用路线成分画出,描述轮廓的数量放在它的d属性中。
a.样式中的fill用来设置填充色。
b.路线数据由命令和坐标构成:

指令 说明
M 20 40 表示移动画笔到(20,40)
L 80 40 表示绘制一条线到(80, 40)
A 10 10 90 0 1 70 100 绘制一个椭圆弧

圆弧命令以字母A最早,前边紧跟着7个参数,那7个参数分别用来代表:

  • 椭圆的x半径和y半径
  • 椭圆的x轴旋转角度
  • 圆弧的角度小于180度,为0;大于或等于180度,则为1
  • 以负角度绘制为0,不然为1
  • 终点的x、y坐标

ag视讯直播 26

接下来绘制购物袋上面的部分

XHTML

<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />

1
<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />

上面的一对是一个半弧形,作者同样用路线来画出,也得以选取基础形状来产生。

体制中的stokestroke-width分级用来安装描边色和描边的小幅。

ag视讯直播 27

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覆盖
    

ag视讯直播 28

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>
    

Step3、绘制眼睛

XHTML

<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" /> <circle cx="60" cy="60" r="2.5" style="fill: #fff;" />

1
2
<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" />
<circle cx="60" cy="60" r="2.5" style="fill: #fff;" />

运用基础形状,画多个个小圆点。两个属性分别是岗位坐标、半径和填充颜色。
ag视讯直播 29

本文由杏彩发布,转载请注明来源

关键词: