重新编写了svgdr在线绘制工具

马黑黑 · 发表于 2025-9-12 11:49

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

svgdr在线绘制工具有两个版本，重新编写的是第一个版本，基于iframe docsrc创建预览区，第二个版本现在运行于马黑整站系统 => svgdr on line，使用实体iframe创建预览区。两者其实极为相似，不同之处除预览区创建方式一个虚的一个实的之外，第一版没有网络依赖，直接可以本地运行，即便断开网络。

为方便学习、应用，我将svgdr所有资源连同第一版绘制工具打包成一个目录。需要的请访问我的永硕网盘，打开后进入“网络相关”目录，找到里面的 svgdr.zip，下载它解压到指定文件夹，在 svgdr 目录里找到 index.html，双击它将使用默认浏览器打开svgdr文档页面，上面左上角有第一版在线绘制工具链接。注意，页面的编写遵循CSS3、HTML5标准，请确保默认浏览器是现代浏览器而非古董级别的浏览器。

svgdr在线绘制工具已经封装好一切，直接输入svgdr绘制指令即可，输入完毕，点击“运行代码”按钮，如果绘制代码准确无误，预览区将呈现相应的SVG图形。在线工具右上角有指令查询，比如想知道画圆的指令，可以输入 circle 或全部或部分字母，就会出现对应指令和参数。全部指令和说明则可通过“文档”链接查找阅读。

工具默认设置svg的尺寸为 400*400，没有设置 viewBox 属性（这将默认使用 0 0 400 400的视口设置），如果需要可以通过指令dr.setsvg({width: 600, height: 600, viewBox: '-100 -100 200 200'});更改svg的尺寸和视口。当svg画布大于预览区尺寸，可以拖曳预览区左下角更改预览区的尺寸以适应画布的大小。

下面给两个绘制实例：

// 设置svg宽高与viewBox dr.setsvg({width: 600, height: 600, viewBox: '-100 -100 200 200'}); // 画一个填充圆 dr.circle(0, 0, 90, 'olive');

// 变量：顶点数、大圆半径、小圆半径、路径 var total = 5, R = 200, r = 60, path = 'M'; var a = 360 / total; // 平均角度 // 遍历顶点数 Array.from({length:total}).forEach((_,k) => { // 计算大小外切圆对应的顶点坐标 var X = (200 + R * Math.cos(Math.PI/180 * a * k)).toFixed(2), Y = (200 + R * Math.sin(Math.PI/180 * a * k)).toFixed(2), x = (200 + r * Math.cos(Math.PI/180 * (a * k + a/2))).toFixed(2), y = (200 + r * Math.sin(Math.PI/180 * (a * k + a/2))).toFixed(2); // 拼接路径 path += `${X} ${Y}, ${x} ${y} `; }); path += 'Z'; // 封闭路径 dr.path(path, 'none', 'darkred', 2); // 绘制路径

以上实例代码均可在在线工具中运行。svgdr在线工具绘制图形时，均实时生成svg代码，可以点击“svg代码”查看和复制。