MockSVG

用于生成 SVG 图片的 Base64 数据 URL 的工具类。

功能

• 自定义尺寸、背景色和文本的占位符 SVG 图片。
• 支持自定义文本颜色、字体大小、字体族和字体粗细。
• 可通过 slot 添加额外的 SVG 元素。

安装

无需安装，直接将脚本引入项目即可。

使用方法

1. 将类引入项目中：

   import MockSVG from 'mock-svg';

2. 使用 generate 方法生成 Base64 数据 URL：

   const svgDataUrl = MockSVG.generate({
     size: [400, 300],
     bgColor: '#eeeeee',
     text: 'Hello, SVG!',
     textColor: '#333333',
     fontSize: 24,
     fontFamily: 'Verdana, sans-serif',
     fontWeight: 'bold',
     slot: '<circle cx="200" cy="150" r="50" fill="blue" />',
   });
   
   // 在图片标签中使用生成的 Data URL：
   document.getElementById('svgImage').src = svgDataUrl;

3. 示例输出：

   • 生成的 Base64 数据 URL 可用作 SVG 图像。

API 文档

MockSVG.generate(options)

| 参数 | 类型 | 默认值 | 描述 | |--------------|---------|----------------------|----------------------------------------| | size | 数组 | [320, 280] | 包含宽度和高度的数组，单位为像素。 | | bgColor | 字符串 | "#f2f5f7" | SVG 的背景颜色。 | | text | 字符串 | "placeholder" | 显示在 SVG 中心的文本。 | | textColor | 字符串 | "#00000033" | 文本颜色。 | | fontSize | 数字 | 32 | 文本的字体大小。 | | fontFamily | 字符串 | "Arial, sans-serif"| 文本的字体族。 | | fontWeight | 字符串 | "normal" | 文本的字体粗细。 | | slot | 字符串 | "" | 额外的 SVG 元素字符串。 |

返回值：

返回表示 SVG 图片的 Base64 数据 URL 字符串。