loading带你svg入门

参考资料:

SVG简介-前端早读

张鑫旭--一个简单的loading demo

一、svg简介

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 符合W3C标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

支持IE9+

二、svg嵌入方式

直接使用svg标签插入html文档（最常用）

<svg width="100%" height="100%" version="1.1"></svg>

使用xml标准编写外部文件，后缀名为.svg，使用ifram标签链入html文档，如

// rect.svg文件
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

// html文件
<iframe src="rect.svg" width="300" height="100"></iframe>

三、loading实战

了解了svg基础后，让我们撸起袖子开始干吧。实践是最好的提高方式啊。

我们想要实现的初步效果是，通过滑块的左右移动，控制圆环的有色面积，效果如下：

效果图

形状标签

svg中有许多形状标签，包括矩形<rect>、圆<circle>、椭圆<ellipse>、线<line>等等。这里自然是使用<circle>,并为其设置中心点和半径。

<svg  width="100%" height="100%" version="1.1">
    <circle cx = "50" cy = "50" r = "40"></circle>  //一个半径为40的圆，中心点位于（50,50）
</svg>

一个大黑饼

svg的坐标是相对于左上角
对于其他形状，也都有其各自的设置属性

   <rect width= "50" height= ></rect>  
  <line x1="0" y1="0" x2= "50" y2= ></line>  
 <polygon points="220,100 300,210 170,250 123,234"></polygon> //多边形

属性/样式

我们要的是一个空心圆，那么就需要对我们的大黑饼进行美化。修改黑饼的填充和外边框颜色

<svg  width="100%" height="100%" version="1.1">
    <circle cx = "50" cy = "50" r = "40" fill="none" stroke="#ddd" stroke-width="5px"></circle>  
</svg>

也可以通过为他设置样式的方式

  <circle cx = "50" cy = "50" r = "40" style = "fill='none';  stroke='#ddd' ;stroke-width='5px';"></circle>

注意：作为属性值时不允许添加单位

是不是越来越接近了

stroke-dasharray样式

stroke-dasharray（num1,num2...）：设置循环间距，虚实结合

我们在这个圆上再叠加一层有色圆，并设置stroke-dasharray样式

 <circle id="circle1" “cx = "50" cy = "50" r = "40" style = "fill='none';  stroke='#ddd' ;stroke-width='5px';"></circle>  
 <circle id="circle2" “cx = "50" cy = "50" r = "40" style = "fill='none';  stroke='#00A5E0' ;stroke-width='5px'; stroke-dasharray="120,250"></circle>  
//这里的stroke-dasharray是随机，之后需要通过js修改

stroke-dasharray="120,250"效果

stroke-dasharray="1,2"效果

一个有趣的样式，可以自行更多的尝试。

所以开篇的效果重点就在于使用JS去控制stroke-dasharray属性

<input type="range" id="range" value = "0"/>

//js代码
if (window.addEventListener) {
    var range1 = document.querySelector("#range");
    var circle = document.querySelectorAll("circle")[1];
    if (range1 && circle) {
        range1.addEventListener("change", function() {
           var persent = range1.value / 100;
           circle.setAttribute("stroke-dasharray", Math.PI * 2 * 40 * persent+","+Math.PI * 2 * 40 * (1-persent));
          
        });
    }

一个滑块控制圆环的demo就完成啦！

渐变

现在来给demo升个级，新增两条需求

给圆环加上渐变色
圆环计时自动改变

线性渐变linearGradient：x1,x2相等,y1和y2不相等，表示水平渐变；x1,x2不相等,y1和y2相等，表示垂直渐变；
通过url包裹Id调用相应渐变块

和css3的渐变相比，svg能实现的效果更复杂

<defs>
    <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
        <stop offset="0" stop-color="#e52c5c"></stop>
        <stop offset="1" stop-color="#ab5aea"></stop>
    </linearGradient>
    <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">
        <stop offset="0" stop-color="#4352f3"></stop>
        <stop offset="1" stop-color="#ab5aea"></stop>
    </linearGradient>
</defs>

<g transform="translate(250,150),rotate(-90)">
    //对整个模块实现旋转
    <circle cx="100" cy="50" r="40" stroke="#ddd" stroke-width="10" fill="none"/>
    <circle cx="100" cy="50" r="40" stroke="url('#gradient2')" stroke-width="10" fill="none" stroke-dasharray="125 251"/>
</g>

渐变色叠加成功

定时就比较好做了，加一个定时器即可。出于性能考虑这里我使用setTimeout链式结构设置定时器（当然也能使用setInterval）

        var time=10;
        var count = Math.PI * 2 * 40/10;
        setTimeout(function fn(){
        //var present = count * time/Math.PI * 2 * 40
            if(time > 0){
                setTimeout(fn,1000);
            }
           circle2.setAttribute("stroke-dasharray", count*time+","+Math.PI * 2 * 40 );
            time--;
        },1000)

最终效果

四、小结

svg绘制矢量图形，而且效果丰富，兼容性好支持IE9+，本篇仅仅是带你入门。还有很多精彩的功能等待你去学习。来不及了，快学车！