snap.svg+vue实现圆形导航

查看案例请点击此处:
 
使用的技术框架:
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方式,都可以实现。
 
 
 


[本日志由 admin 于 2020-11-25 09:11 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 1149
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭