# MockSVG

**Repository Path**: wavef/mock-svg

## Basic Information

- **Project Name**: MockSVG
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-07
- **Last Updated**: 2025-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MockSVG

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

## 功能

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

---

## 安装

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

---

## 使用方法

1. 将类引入项目中：

   ```javascript
   import MockSVG from 'mock-svg';
   ```

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

   ```javascript
   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 字符串。

---