美文网首页
loading带你svg入门

loading带你svg入门

作者: 如意同学Try | 来源:发表于2018-01-10 19:05 被阅读0次

参考资料:

SVG简介-前端早读

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

一、svg简介

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

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

支持IE9+

二、svg嵌入方式
  1. 直接使用svg标签插入html文档(最常用)
<svg width="100%" height="100%" version="1.1"></svg>
  1. 使用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升个级,新增两条需求

  1. 给圆环加上渐变色
  2. 圆环计时自动改变
  • 线性渐变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+,本篇仅仅是带你入门。还有很多精彩的功能等待你去学习。来不及了,快学车!

相关文章

  • loading带你svg入门

    参考资料: SVG简介-前端早读 张鑫旭--一个简单的loading demo 一、svg简介 SVG 是使用 X...

  • svg-loading

    https://github.com/qizfeng/svg_loading

  • 一些记录

    适合初学者的SVG绘图入门以及SVG动画入门~ https://www.chengrang.com/svg-bas...

  • svg画loading

    成品效果 相关代码 文本创建一个空的svg,写入文本 css中影响字体样式的属性同样可以作用在

  • svg loading #1

  • loading动画(svg)

    效果 组件代码 使用方式

  • 【前端数据可视化】SVG

    1. svg入门 示例代码 : 参考网址 : SVG 菜鸟教程[https://www.runoob.com/sv...

  • svg实现简单的loading

    html css //设置实线和虚线的宽度stroke-dasharray: 50 30;//引用dash动画,动...

  • css3 小特效

    闪烁的灯、光标 摆动效果、摇摆 返回顶部小icon&css3实现小三角 svg Loading效果

  • SVG入门

    SVG意为可缩放矢量图形(Scalable Vector Graphics),是使用XML来描述二维图形和绘图程序...

网友评论

      本文标题:loading带你svg入门

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