H5 SVG 使用方式总结

实际工作中，SVG大多数是用的组合来使用的，defs 顾名思义就是「definitions」定义，我们可以把许多重复性质高的元素，放入defs 元素内，让它变成一个可以重复利用的物件。而symbol更多的只是包含单个图标。

1、SVG使用方式

不论哪种方式，svg都必须作为根标签

• 外链方式
  这种方式是先定义好一个svg文件，再在html或css中引入。

// test.svg

    
    


         ![](test.svg)

外链的方式仅仅是将svg元素作为一个图片，无法利用JS对其做一些操作，如改变大小颜色等。

• 内联方式

内联方式可以向操作普通html元素一样通过getElementById拿到dom，再通过setAttribute方法做属性操作：

2、defs & use

• 实例1：简单组合

基本组合

• 实例2：复杂组合

复杂组合

• 实例3：渐变

渐变

• 实例4：路径

  


   这是随路径跑的文字，很酷吧
  

路径

• 实例5：裁切

裁切

• 实例6：遮罩

遮罩

• 实例7：标志marker

marker

• 实例8：滤镜

滤镜

3、控制svg

• CSS 方式
  svg元素和html元素一样，都可以用class属性添加类名来控制样式，只是对于svg元素而言，可控制的样式较少，常见的有fill,stroke,stroke-width
  ,opacity以及transform，看一个例子：

  //定义区
  
  //使用区
   
  
  //定义样式
  .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内动态新增或等元素，要使用createElementNS，而不是createElement，因为svg和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属性的值：

实例：

    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专门有做动画的元素
先看移动端兼容性：

SVG SMIL animation

• set
  在特定时间之后修改某个属性值
  用法：

这个「马」会在3秒之后从横坐标160的位置移动60这个位置(瞬移，无动画效果)

• animate
  实现单属性(不包含css的transform)的动画过渡效果

• animateTransform
  专用于transform动画

• animateMotion
  专用于复杂的路径动画

5.3 小结

关于用svg做动画，更推荐用5.2的方式，并且5.2中animate的用法是最多的，animate元素还可以组合使用：

此外，svg动画还可以手动控制(JS)动画的开始和暂停

// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations()

6、参考：

• SVG Sprite 使用简介
• SVG 研究之路 (18) - 再談 defs
• 超级强大的SVG SMIL animation动画详解
• https://www.nihaoshijie.com.cn/index.php/archives/667/