预览模式: 普通 | 列表

snap.svg+vue实现圆形导航

查看案例请点击此处:
 
使用的技术框架:
1、snap.svg实现Svg
2、数据与视图双向交互由vue-cli3实现
 
功能点:
1、图形与数组双向互动。可点击“添加”按钮添加数组中的对象。
2、算法实现path环状节点,角度、弧度、边长的逻辑关系。
3、Snap.animate 实现动画、transform用法
4、stroke-dasharray实现线条间隙。
5、viewBox改变Svg中心。
6、textPath路径文字
 
通过这个案例,了解了两种方式,来实现SVG线条。用HTML+CSS方式、使用JS方式,都可以实现。
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 9
做为正当的做法,应该使用
Javascript代码
  1. npm install snapsvg  
  2. 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代码
  1. npm install snapsvg-cjs  
  2. import "snapsvg-cjs"  
经我验证可行。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 63