SVG 实现半环形进度条

要实现的效果图如下

image.png

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

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

例如：画个圆环

解析：

image.png

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,如下：两个小人

解析结果：

image.png

line元素是一个SVG基本形状，用来创建一条连接两个点的线。

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束
  例如：

解析：

image.png

text元素定义了一个由文字组成的图形。
例如：

   
        男：45%
      

解析：

image.png

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'

解析：

image.png

stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距
　　如：stroke-dasharray = '10' 表示：虚线长10，间距10，然后重复 虚线长10，间距10

offset：偏移的意思,这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
这个属性要搭配stroke-dashoffset才能看得出来效果，非虚线的话，是无法看出偏移的。

思路

半弧度进度条是最难的，可使用stroke-dasharray配合stroke-dashoffset 来画。

弧度讲解1.png

图2.png

进度红色部分AC为实线弧度，灰色部分BC为虚线弧度，空白部分AB弧度为间隔

• 实线弧度AC = 圆周长P - 弧线弧长BC - 空白弧长AB
• 偏移角度：左半边偏移量只和空白弧长AB有关，右半边偏移量和弧长BE+空白弧长AB有关
• 空白弧长AB = 2Rarcsin(a/2R) （注意a为弦长AB）
• 图 2 里的4个半弧长是有4个path 化成的
• 由于弧长有宽度，弧长AB的半径 = 进度条弧长的半径- 弧长的宽度

实现代码