不使用echarts绘制一个简单的饼图

不使用echarts绘制一个简单的饼图

最近有一个需求要求在表格中显示阅读状态，为了效果直观，ui设计了使用饼图来进行展示。效果如下：

第一想法是使用echarts，但是一想到表格数据量很大，如果每行都用canvas来渲染那性能肯定是很差的；
第二个想到的是用css，通过伪类来实现，然后经过一番尝试之后发现无法动态来修改伪类transform属性的值；
最后在codepen上找到一种完美实现方案，没错那就是svg，进入传送门

什么是SVG

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

绘制一个圆

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

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

r 属性定义圆的半径。

stroke-dasharray属性

stroke-dasharray是用来创建虚线的属性

<svg>
  <g fill="none" stroke=<