您的位置:澳门新葡8455最新网站 > Web前端 > 线条之美,使用办法总计

线条之美,使用办法总计

发布时间:2019-11-14 16:55编辑:Web前端浏览(74)

    线条之美,玩转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。

    <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

    滤镜

    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使用,替换诸如纯图片、iconfont图标等方案。使用内联svg的优势在于:1、少发叁次http央求;2、放大不会变形;3、易于用JS调整,比iconfont越来越灵活。

    一级做法(SVG sprite):

    • 1、将具备须求运用的小Logo统一定义在svg下,该svg要设置display:none,种种小图标用symbol包围,各样symbol取二个id,方便后续调用;
    • 2、使用svg+use的章程调用,use中用属性xlink:href='#id'来引用相应Logo,能够给各样svg取三个类名,方便css和js动态调控;
    • 3、通过getElementById的点子获取须求退换属性的use成分,为其动态增加或删除相应的类名;
    • 4、增加的类名最后是运用在symbol上,symbol中定义的Logo(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属性的值:

    图片 25

    实例:

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

    图片 26

    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.第22中学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 Coca Cola使用简要介绍
    • SVG 切磋之路 (18) - 再談 defs
    • 最棒无敌的SVG SMIL animation动漫详细明白
    • https://www.nihaoshijie.com.cn/index.php/archives/667/

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:线条之美,使用办法总计

    关键词: