使用svg画弧线的简易方法

今天有一个需求需要根据进程画百分比弧度，一搜索度娘清一色的path路径，我知道path是万能的但是那些点的坐标计算实在是难为我了，于是根据现有的api想到了一种取巧的办法实现，实现的效果如下

这个方法一样是用到了svg元素  但不是非常灵活的path（越灵活的东西功能越强大，但使用其实越麻烦，就比如transform的translate，rotate，scale，三种方法其实最后都是计算除了偏移矩阵，矩阵也是万能的）  而是使用的具有一定封装好的属性的circle，Dom结构如下：

如circle的类型所述 第一个circle是背景，第二个circle为高亮部分

我们用到了2个核心属性来完成这一工作stroke-dasharray与stroke-dashoffset    

stroke-dasharray是虚线描点之间的距离  但假如足够大的话，当间隔大于圆的周长的时候 我们可以使其只有一个虚点，因为一个虚点就大于了整个圆的长度。

stroke-dashoffset是一个与中心角度挂钩的属性，可以理解为需要显示部分的反向值，它的值+需要高亮部分的长度 === 圆的周长

所以给这个2个值赋值

之所以获取HTML的fontSize是因为我定义的长度单位是rem  为了自适应分辨率

最后用css给circle填充颜色

PS：circle的起始点并不在12点钟的方向，而是在3点方向  所以需要Z轴旋转-90deg使其起始点对准12点方向。