H5 SVG 使用方式总结

作者: 风之化身呀 | 来源:发表于2017-10-06 16:52 被阅读492次

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

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

基本组合

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

复杂组合

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

渐变

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

路径

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

裁切

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

遮罩

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

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

滤镜

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

symbol元素和defs差不多，都是用来组合元素的，但symbol更多的用于单个图标的组合

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使用最多的场景还是当小图标使用，替换诸如纯图片、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属性的值：

实例：

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

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

6、参考：

网友评论

本文标题：H5 SVG 使用方式总结

本文链接：https://www.haomeiwen.com/subject/nlmlyxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！