vue和svg（一），用svg画出带坐标系的进度条

在我现在的项目中，因为业务的需要，使用了vue加svg的方式来对前端进行重构，现在项目基本完成了，想趁这个时机把项目做一个总结，当中大致包含，vue及一些vue组件，element ui，svg等，将在后续的博客中相应写出。想到哪里就写到哪里，如果大家有特别想看的，可以留言，一起探讨，一起进步吧！由简到繁，我们就从用svg画出一个进度条说起吧。(大牛可以略过了…)
现在有很多在前端中有众多基JavaScript的图形绘制库，如D3，uvCharts等等。

这里我没有引用这些JS库，而是想自己画出来，因为感觉画这个太简单了，而且svg本身兼容性非常好，而且入门非常简单。如上的图形中，使用的代码非常少。我们需要做的事情仅仅是：
1 找出图形的边界，计算好比例尺（ps：这里先忽略视口和viewBox的比例，所有图形单位都是px，之后的示例中，会陆续介绍viewBox，和其他单位）。比如我这个，进度条的边界是24小时，那我需要知道我的进度条上边的最小单位是min还是second，我这里是分钟，那么，进度条最长为24 * 60，假如我们要把它放在1440的画布中，那就比较好算了：1min 对应画布中1的长度
新建画布:

<svg height='110px' width='1440px' xmlns="http://www.w3.org/2000/svg"></svg>

2 得出svg的总宽度之后，我们就要考虑要显示的进度条在当前比例尺（1:1）下显示情况了。现在如果要把一个长度2h30mins的时间显示在svg中，我们首先应该做如下转换
current_time = 2 * 60 + 30

<rect width="150px" height="30px" y='30' style="fill:#fdd835;" x='0'/>

这时，一个2h30mins的矩形已经在图形中展示出来了。