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方式,都可以实现。
vue-cli3引用snap.svg出现错误的解决办法
作者:admin 日期:2020-11-12做为正当的做法,应该使用
Javascript代码
- npm install snapsvg
- import Snap from 'snapsvg'
来使用svap.svg
但事实上这样是不行的,会报红字错:
vue-router.min.js:6 TypeError: Cannot read property 'on' of undefined
找了很多百度、github issue的很多资料,发现很多人都碰到了这个问题,也提供了Webpack及改写vue-cli3( vue.config.js)的办法,但实验发现都解决不了问题。
最终在stackoverflow.com找到了最简便的解决办法:
Javascript代码
- npm install snapsvg-cjs
- import "snapsvg-cjs"
经我验证可行。