SVG Drawer 使用说明

目录

快速开始

网页版

在输入框中输入图形描述(中文自然语言),点击"生成 SVG"即可预览。支持切换"预览"和"代码"视图,可下载或复制 SVG。

命令行版

python -m svg_drawer "画一个边长为200的红色正方形" -o square.svg

API 调用

curl -X POST https://draw.z.h3hu.com/api/generate \
  -H "Content-Type: application/json" \
  -d '{"description":"画一个边长为200的红色正方形"}'

完整图形列表(48 种)

类别图形名称示例
基础平面正方形正方形 边长200 边框红色
长方形长方形 宽300 高200
圆角矩形圆角矩形 宽280 高180 圆角25
圆形圆形 半径150 填充浅蓝
椭圆椭圆 rx150 ry90
三角形等边三角形等边三角形 底边200
直角三角形直角三角形 底边200
等腰三角形等腰三角形 底边180 高160
四边形梯形梯形 上底120 下底240 高150
菱形菱形 宽180 高240
平行四边形平行四边形 宽240 高150 偏移60
多边形正多边形正六边形 半径120(支持 3-12 边)
五角星五角星 外半径120 内半径50
曲线扇形扇形 半径150 起始角度30 结束角度150
圆环圆环 外半径150 内半径100
螺旋线螺旋线 圈数5 最大半径200
线段箭头箭头 起点x100 起点y400 终点x700 终点y100
线段线段 起点x100 起点y400 终点x700 终点y400
折线折线 (100,400) (250,150) (400,350)
辅助网格网格 10行8列 单元格大小50
坐标轴坐标轴 x轴范围(-10,10) y轴范围(-10,10)
3D 立体立方体立方体 边长200
圆柱体圆柱体 半径80 高200
圆锥体圆锥体 半径80 高200
数据图表柱状图柱状图 数据[30,50,80,45,70] 标签[A,B,C,D,E]
幼儿园/小学钟面钟面 时3 分30
十格框十格框 数量8
百数表百数表 高亮[25,36,47]
小学中高数轴数轴 0-20 步长2
分数图分数图 分子3 分母8
角度图角度图 边1角度0 边2角度60 标签60°
初中不等式数轴不等式 0-10 实心点[3] 空心点[8]
平行线截线平行线 线数2 截线角度60
勾股定理勾股定理 a=3 b=4
韦恩图韦恩图 集合数3 标签[A,B,C]
行程线段图线段图 总长600 分段[360,240] 小车40km/h 向右
高中正弦曲线正弦曲线 振幅120
余弦曲线余弦曲线 振幅80
单位圆单位圆 角度45
箱线图箱线图 数据[5,15,25,35,45]
直方图直方图 区间[0,10,20,30] 频率[5,10,3]
散点图散点图 (1,2) (2,3) (3,5)
概率树状图概率树状图 层级[2,2]
流程图流程图
叠加图坐标折线图坐标图 标题:销售 x范围(1,6) y范围(0,10) 折线 数据[...] 红色
坐标曲线图坐标图 标题:函数 曲线 数据[...] 绿色
文字标注文字 这是标题 字号20 颜色红色 位置(400,50)

通用参数说明

参数说明示例
颜色 / 边框色图形边框颜色红色 蓝色 #FF0000
填充色图形内部填充颜色填充绿色 填充浅蓝
实心 / 空心是否填充实心 空心
线宽边框/线条粗细线宽3
虚线虚线边框虚线 虚线5,5
透明度图形透明度 0-100透明度50
旋转旋转角度旋转45
位置图形中心坐标位置(400,300)

支持的颜色名称:红色 橙色 黄色 绿色 青色 蓝色 紫色 粉色 黑色 白色 灰色 棕色 金色 银色 深红 浅红 深绿 浅绿 深蓝 浅蓝 天蓝 湖蓝 橘红 玫瑰红 柠檬黄

高级用法

坐标叠加图(多系列数据图表)

在坐标系上叠加折线、散点、曲线、柱状图,支持图例:

坐标图 标题:销售趋势 x范围(1,6) y范围(0,10) x标签:月份 y标签:万元 
  折线 数据[(1,3),(2,5),(3,8),(4,5),(5,7),(6,6)] 红色 标签:产品A
  散点 数据[(1,2),(2,3),(3,4),(4,5),(5,4),(6,5)] 蓝色 标签:产品B
  曲线 数据[(1,4),(2,4),(3,6),(4,5),(5,6),(6,5)] 绿色 标签:趋势
  网格

批量组合(多个图形叠在同一画布)

通过文件批量模式或 API 批量接口:

# API 调用
curl -X POST https://draw.z.h3hu.com/api/generate/batch \
  -H "Content-Type: application/json" \
  -d '{
    "descriptions": [
      "坐标轴 x轴范围(0,10) y轴范围(0,10) 位置(400,300)",
      "折线 (150,100) (400,500) (650,100) 颜色红色 线宽2",
      "文字 抛物线示意图 字号18 位置(400,30) 加粗"
    ]
  }'

CLI 命令行使用

# 基础用法
python -m svg_drawer "画一个边长为200的红色正方形" -o output.svg

# 批处理
python -m svg_drawer -f shapes.txt -o combined.svg

# 自定义画布
python -m svg_drawer "圆形 半径50" -W 400 -H 400 -b "#F0F0F0" -o tiny.svg

# 交互模式
python -m svg_drawer -i

# 列出所有图形
python -m svg_drawer --list

# 管道输出(供第三方程序调用)
python -m svg_drawer "正方形 边长200" > output.svg
python -m svg_drawer "正方形 边长200" | other-tool --svg-from-stdin

API 接口文档

启动服务后访问 https://draw.z.h3hu.com/docs 查看 Swagger 交互式 API 文档。

POST /api/generate

生成单个 SVG 图形

{
  "description": "画一个边长为200的红色正方形",
  "width": 800,
  "height": 600,
  "background": "white"
}
{
  "svg": "<svg>...</svg>",
  "description": "画一个边长为200的红色正方形"
}

POST /api/generate/batch

批量生成多个图形叠加在同一 SVG

{
  "descriptions": [
    "坐标轴 x轴范围(0,10) y轴范围(0,10) 位置(400,300)",
    "折线 (150,100) (400,500) (650,100) 颜色红色 线宽2"
  ],
  "width": 800,
  "height": 600,
  "background": "white"
}

GET /api/shapes

获取所有支持的图形类型列表

curl https://draw.z.h3hu.com/api/shapes

GET /api/health

服务健康检查

curl https://draw.z.h3hu.com/api/health

第三方程序对接方法

方法:HTTP API 调用

启动在线服务后,通过 REST API 调用,适合 Web 应用、微服务架构。

curl

curl -X POST https://draw.z.h3hu.com/api/generate \
  -H "Content-Type: application/json" \
  -d '{"description":"正方形 边长100 红色","width":400,"height":400}' \
  -o output.svg

Python requests

import requests
resp = requests.post("https://draw.z.h3hu.com/api/generate", json={
    "description": "正方形 边长100 红色",
    "width": 400, "height": 400
})
svg = resp.json()["svg"]
with open("output.svg", "w") as f: f.write(svg)

JavaScript fetch

const resp = await fetch('https://draw.z.h3hu.com/api/generate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({description: '正方形 边长100 红色'})
});
const { svg } = await resp.json();