探索SVG Morpheus:让SVG图标生动起来的魔法库
请注意:此项目已不再维护,但您可以自由地fork并启动新项目。
项目简介
SVG Morpheus是一个JavaScript库,它赋予SVG图标神奇的能力——从一个形状平滑地过渡到另一个形状,实现Material Design中所倡导的Delightful Details动画效果。这个库简单易用,可轻松为您的网站或应用增加动态和交互性。
活动演示
想要立即体验SVG Morpheus带来的惊喜吗?立即查看在线示例。
安装与使用
使用CDN
您可以直接通过以下CDN链接引入SVG Morpheus库:
<script src="https://cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script>
下载安装
您也可以选择从GitHub下载源码,或者使用NPM或Bower进行安装:
- 从GitHub下载
- NPM:
npm install svg-morpheus
- Bower:
bower install svg-morpheus
然后,在HTML文件中添加svg-morpheus.js
脚本。
<script src="svg-morpheus.js"></script>
如何使用
- 将SVG图标集添加到你的HTML文档。
- 调用
new SVGMorpheus(element)
创建SVG Morpheus实例,其中element
是图标集的DOM元素或CSS查询选择器。 - 初始化后,你可以调用
to(ID)
方法将图标转换为图标集中指定的ID对应的图标。
var myIcons = new SVGMorpheus('#myIconSet');
myIcons.to('icon1');
功能特性
SVGMorpheus构造函数
创建一个新的SVG Morpheus实例。
var myIcons = new SVGMorpheus(element, options, callback);
SVGMorpheus.to() 方法
将图标平滑地过渡到另一个图标。
myIcons.to(iconId, options, callback);
此外,还有自定义缓动函数注册和其他可定制选项,以满足你的不同需求。
图标集结构
有效的图标集应遵循如下的SVG结构:
- 第一层节点是带有'id'属性的
<g>
元素,它们定义了图标集中的各个图标; - 第二层节点是图形元素(如
<path>
,<circle>
等),它们描述了图标的图形样式。
支持的浏览器
SVG Morpheus兼容广泛,可在以下浏览器中正常工作:
- Chrome
- Firefox
- Internet Explorer 10 及以上
- Safari
- Opera
- iOS Safari
- Android 浏览器(>=4.4)
- Chrome for Android
许可证
SVG Morpheus遵循Apache 2.0许可证,具体信息请参阅LICENSE文件。
用SVG Morpheus为你的网页设计注入生命力,创造令人惊叹的交互体验吧!