SVG基础属性介绍

• width、height：分别表示SVG元素的宽高。

• viewBox：

• 前两个参数是对SVG元素做位移使用，通常设置为0；

• 后两个参数表示SVG元素可容纳的大小，具体可参考SVG属性之viewBox。

circle

• cx、cy：圆心的位置。

• r：表示半径。

• fill：圆的填充色。

• stroke-width：边框宽度。

• stroke：边框的填充色。

模拟一个百分比

• stroke-dasharray：顾名思义，dash表示虚线，stroke-dash可理解为将边框设置为虚线，stroke-dasharray表示这个属性可以接收多个值，实际上一般是接收两个值，例如：

• stroke-dasharray: 2,2，表示边框的长度是200，间隔200的宽度，再有200的虚线长度...，依次类推，呈现的效果是 -- -- -- --

• stroke-dashoffset：设置边框的偏移距离，这个属性是核心，通过设置它的偏移位置来模拟出百分比。