SVG 使用方式总结

十一月 10, 2019
web前端
没有评论

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

2017/02/28 · HTML5 ·
SVG

原文出处：
AlloyTeam

通常来说web前端实现动画效果主要通过下面几种方案：

css动画；利用css3的样式效果可以将dom元素做出动画的效果来。
canvas动画；利用canvas提供的API，然后利用清除-渲染这样一帧一帧的做出动画效果。
svg动画；同样svg也提供了不少的API来实现动画效果，并且兼容性也不差，本文主要讲解一下如何制作svg线条动画。

先来看几个效果：

demo

以上这些效果都是利用SVG线条动画实现的，只用了css3和svg，没有使用一行javascript代码，这一点和canvas比起来要容易一些，下面就说明一下实现这些效果的原理。

关于SVG的基础知识，我这里就不再叙述了，大家可以直接在文档中查看相关的API，这里只说一下实现线条动画主要用到的：path
（路径）

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

地铁上逛segmentfault看到一篇用纯css和SVG来实现的很赞的效果，觉得拿来做一些开场效果动画应该不错。

<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

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

效果：

呵呵，看起来很简单，但是，如何让这个线条动起来呢？这里就要明白到SVG里的path的一些主要属性：

stroke：标识路径的颜色；
d：标识路径命令的集合，这个属性主要决定了线条的形状。
stroke-width：标识路径的宽度，单位是px；
stroke-dasharray：它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2；
stroke-dashoffset：标识的是整个路径的偏移值；

以一张图来解释stroke-dasharray和stroke-dashoffset更容易理解一些：

因此，我们之前的路径就会变成这个样子：

CSS

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

#path {

stroke-dasharray: 3px, 1px;

stroke-dasharray: 0;

}

效果：

理解了stroke-dasharray的作用之后，下面我们就可以使用css3的animation来让这个路径动起来。

Sass

#path {     animation: move 3s linear forwards; } @keyframes move {
      0%{           stroke-dasharray: 0, 511px;       }       100%{
          stroke-dasharray: 511px, 511px;       } }

#path {

animation: move 3s linear forwards;

}

@keyframes move {

0%{

stroke-dasharray: 0, 511px;

}

100%{

stroke-dasharray: 511px, 511px;

}

效果：

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

#path {

animation: move 3s linear forwards;

stroke-dasharray: 511px,511px;

}

@keyframes move {

0%{

stroke-dashoffset: 511px;

}

100%{

stroke-dashoffset: 0;

}

效果：

当我们掌握了上述的方法后，整个利用SVG实现线条动画的原理就已经清楚了，我们需要的就是一个SVG路径了，但是总画一些简单的线条还是不美啊，那我们如何才能得到复杂的svg路径呢？

找UI设计师要一个。
自己利用PS和AI做一个，只需要简单的2步。

以部落LOGO为例：

1，得到部落LOGO的png图片。

2，右键图层，然后点击从选区生成工作路径，我们就可以得到：

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

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

5，利用上文介绍的实现动画的方法，我们就可以轻松的得到了下面这个效果。

线条动画进阶：

可以看到上面的动画效果和文章最初显示的动画效果还是有区别的，要想实现文章最初的动画效果，需要用到SVG的<symbol>
和 <use>来实现，读者可以在网上查一下这两个标签的用法。

XHTML

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

#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动画触发的时机和改变程度来实现多条动画效果。

效果：

那么如何实现alloyteam的文字动画呢，其实原理也是利用了stroke-dasharray和stroke-dashoffset，这两个属性不仅可以作用在<path>上，同样可以作用在<text>上。

XHTML

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

.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条完全重合的路径，并且每个路径的颜色和动画效果都不一样。

效果：

开启愉快的svg线条之旅吧！

参考资料：

1 赞 1 收藏
评论

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

滤镜

觉得很有趣，正好925快到了，就撸了一个生日快乐的

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空白逐渐变得没有空白

就像是一圈圈蚂蚁在它身上爬。。。。。emmmmm奇特的比喻

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>

fill:none;可以让图形不被填充，如果不添加这一属性，则默认填充颜色是black，这个效果

9159金沙游艺场

SVG 使用方式总结

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

<path> 标签命令

1、SVG使用方式

2、defs & use

3、控制svg

4、svg最佳实践

5、SVG动画

5.1 路径动画

5.2 SMIL动画(2018/1/1更新)

相关文章

No Comments, Be The First!

Cancel Reply

近期文章

近期评论

文章归档

分类目录

功能