snap.svg+vue实现圆形导航
作者:admin 日期:2020-11-24查看案例请点击此处:
使用的技术框架:
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方式,都可以实现。
评论: 0 | 引用: 0 | 查看次数: 3219
发表评论