查看案例请点击此处：

 

使用的技术框架：

1、snap.svg实现Svg

2、数据与视图双向交互由vue-cli3实现

 

功能点：

1、图形与数组双向互动。可点击“添加”按钮添加数组中的对象。

2、算法实现path环状节点，角度、弧度、边长的逻辑关系。下图中所有不同颜色的线段，都是通过CSS定义得到的。可以把一个圆环分成3份，也可以分成50份，得到不同的视觉效果。

3、Snap.animate 实现动画、transform用法

4、stroke-dasharray实现线条间隙，比如下例中的白色间隔。

5、viewBox改变Svg中心。

6、textPath路径文字，实现跟随弧度变化的文字

 

通过这个案例，了解了两种方式，来实现SVG线条。用HTML+CSS方式、或使用snap.svg的JS方式，都可以实现。