SVGInjector 使用教程

SVGInjector 使用教程

SVGInjectorFast, caching, dynamic inline SVG DOM injection library项目地址:https://gitcode.com/gh_mirrors/sv/SVGInjector

1. 项目目录结构及介绍

SVGInjector 是一个用于动态内联注入SVG的JavaScript库。以下是项目的主要目录结构：

.
├── dist             # 存放编译后的库文件，如svg-injector.min.js
├── examples         # 示例代码
└── tests            # 测试文件

• dist: 包含库的生产版本，例如svg-injector.min.js，可以直接在你的项目中使用。
• examples: 提供了一些示例HTML文件，展示如何在实际页面中应用SVGInjector。
• tests: 单元测试文件，用于确保库的功能正确性。

2. 项目启动文件介绍

这个项目并没有传统的启动文件（如index.js或app.js），因为SVGInjector是一个库，不直接运行而是通过引入到其他Web应用程序中来使用。主要的库代码存储在 svg-injector.js 文件中，你可以直接在HTML中通过 <script> 标签引入该文件：

<script src="path/to/svg-injector.min.js"></script>

然后，就可以在JavaScript环境中使用 SVGInjector 函数进行SVG注入。

3. 项目的配置文件介绍

SVGInjector 并没有特定的配置文件，但它允许你在调用函数时传递配置对象作为参数。以下是一些可选的配置选项：

• evalScripts: 控制是否执行SVG中的脚本，默认是 'once' ，表示只执行一次。
  • 'always'：每次注入都执行脚本。
  • 'once'：默认值，对于每个SVG文件，仅在其首次出现时执行脚本。
  • 'never' 或 false：忽略脚本。
• pngFallback: 指定一个路径，当浏览器不支持SVG时，寻找同名的PNG图片作为备选。
• each: 定义一个回调函数，会在每次SVG注入后被调用，接收到已注入的SVG元素作为参数。
• callback: 在所有SVG元素注入完成后执行的回调，接收总的注入SVG数作为参数。

示例配置：

var mySVGsToInject = document.querySelectorAll('img.inject-me');
var injectorOptions = {
  evalScripts: 'always',
  pngFallback: 'assets/png/',
  each: function(svg) { /* 回调函数 */ },
  callback: function(count) { /* 回调函数 */ }
};
SVGInjector(mySVGsToInject, injectorOptions);

以上即为SVGInjector的基本介绍及使用方式，希望对你有所帮助。在实际开发中，可以根据需求调整配置以满足各种场景下的SVG注入需求。

SVGInjectorFast, caching, dynamic inline SVG DOM injection library项目地址:https://gitcode.com/gh_mirrors/sv/SVGInjector