探索SVG Morpheus：让SVG图标生动起来的魔法库

探索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>

如何使用

1. 将SVG图标集添加到你的HTML文档。
2. 调用new SVGMorpheus(element)创建SVG Morpheus实例，其中element是图标集的DOM元素或CSS查询选择器。
3. 初始化后，你可以调用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为你的网页设计注入生命力，创造令人惊叹的交互体验吧！