要实现的效果图如下
svg 语法学习
可以参考https://developer.mozilla.org/zh-CN/docs/Web/SVG网站上的语法
元素参考
path元素用来定义形状的通用元素。
下面的命令可用于路径数据：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
例如：画个圆环
解析：
symbol元素用来定义一个图形模板对象，它可以用一个元素实例化。symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的 元素）才能呈现。
use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用[CSS继承]
(https://developer.mozilla.org/en/CSS/inheritance)。
一般情况下symbol 和use配合着使用的。
例如： 效果中的小人，如果自己画的话，就非常耗时间，可以在iconfont 里找一个，然后引入进来；
在自己的svg 里引入
在阿里图标库复制svg,如下：两个小人
解析结果：
line元素是一个SVG基本形状，用来创建一条连接两个点的线。
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
例如：
解析：
text元素定义了一个由文字组成的图形。
例如：
男：45%
解析：
linearGradient元素用来定义线性渐变，用于图形元素的填充或描边。
例如：
解析：
svg 属性参考
viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开。
stroke-dasharray 属性可控制用来描边的点划线的图案范式,作为一个外观属性，它也可以直接用作一个CSS样式表内部的属性,用于创建虚线，之所以后面跟的是array的，是因为值其实是数组。
例如：
stroke-dasharray = '10'
stroke-dasharray = '10, 5'
stroke-dasharray = '20, 10, 5'
解析：
stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距
如：stroke-dasharray = '10' 表示：虚线长10，间距10，然后重复 虚线长10，间距10
offset：偏移的意思,这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
这个属性要搭配stroke-dashoffset才能看得出来效果，非虚线的话，是无法看出偏移的。
思路
半弧度进度条是最难的，可使用stroke-dasharray配合stroke-dashoffset 来画。
进度红色部分AC为实线弧度，灰色部分BC为虚线弧度，空白部分AB弧度为间隔
- 实线弧度AC = 圆周长P - 弧线弧长BC - 空白弧长AB
- 偏移角度：左半边偏移量只和空白弧长AB有关，右半边偏移量和弧长BE+空白弧长AB有关
- 空白弧长AB = 2Rarcsin(a/2R) （注意a为弦长AB）
- 图 2 里的4个半弧长是有4个path 化成的
- 由于弧长有宽度，弧长AB的半径 = 进度条弧长的半径- 弧长的宽度
实现代码