重新编写了svgdr在线绘制工具
<style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>svgdr在线绘制工具有两个版本，重新编写的是第一个版本，基于iframe docsrc创建预览区，第二个版本现在运行于 <a href="http://mhh.52qingyin.cn/" target="_blank">马黑整站系统</a> => <a href="http://mhh.52qingyin.cn/api/svgdr/tool/" target="_blank">svgdr on line</a>，使用实体iframe创建预览区。两者其实极为相似，不同之处除预览区创建方式一个虚的一个实的之外，第一版没有网络依赖，直接可以本地运行，即便断开网络。</p>
<p>为方便学习、应用，我将svgdr所有资源连同第一版绘制工具打包成一个目录。需要的请访问我的 <a href="http://gxblk.ysepan.com/" target="_blank">永硕网盘</a>，打开后进入“网络相关”目录，找到里面的 svgdr.zip，下载它解压到指定文件夹，在 svgdr 目录里找到 index.html，双击它将使用默认浏览器打开svgdr文档页面，上面左上角有第一版在线绘制工具链接。注意，页面的编写遵循CSS3、HTML5标准，请确保默认浏览器是现代浏览器而非古董级别的浏览器。</p>
<p>svgdr在线绘制工具已经封装好一切，直接输入svgdr绘制指令即可，输入完毕，点击“运行代码”按钮，如果绘制代码准确无误，预览区将呈现相应的SVG图形。在线工具右上角有指令查询，比如想知道画圆的指令，可以输入 circle 或全部或部分字母，就会出现对应指令和参数。全部指令和说明则可通过“文档”链接查找阅读。</p>
<p>工具默认设置svg的尺寸为 400*400，没有设置 viewBox 属性（这将默认使用 0 0 400 400的视口设置），如果需要可以通过指令<mark>dr.setsvg({width: 600, height: 600, viewBox: '-100 -100 200 200'});</mark>更改svg的尺寸和视口。当svg画布大于预览区尺寸，可以拖曳预览区左下角更改预览区的尺寸以适应画布的大小。</p>
<p>下面给两个绘制实例：</p>
<div class="codebox" data-title="例一：改变svg尺寸并画圆">
<txt-green>// 设置svg宽高与viewBox</txt-green>
dr.setsvg({width: 600, height: 600, viewBox: '-100 -100 200 200'});
<txt-green>// 画一个填充圆</txt-green>
dr.circle(0, 0, 90, 'olive');
</div>
<div class="codebox" data-title="例二：绘制五角星">
<txt-green>// 变量：顶点数、大圆半径、小圆半径、路径</txt-green>
var total = 5, R = 200, r = 60, path = 'M';
var a = 360 / total; <txt-green>// 平均角度</txt-green>
<txt-green>// 遍历顶点数</txt-green>
Array.from({length:total}).forEach((_,k) => {
<txt-green>// 计算大小外切圆对应的顶点坐标</txt-green>
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);
<txt-green>// 拼接路径</txt-green>
path += `${X} ${Y}, ${x} ${y} `;
});
path += 'Z'; <txt-green>// 封闭路径</txt-green>
dr.path(path, 'none', 'darkred', 2); <txt-green>// 绘制路径</txt-green>
</div>
<p>以上实例代码均可在在线工具中运行。svgdr在线工具绘制图形时，均实时生成svg代码，可以点击“svg代码”查看和复制。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 谢谢黑黑老师辛苦！ 再创新高，利他之举，功德无量！马老师您辛苦了！{:4_191:} 这是把工具存在网盘里了，下载本地运行，我先去下一个占着再说{:4_173:}
看了一下网盘，编辑器早已收录进去了啊。。 所有的指令都在其中，编辑器页面还贴心的给了指令查询。。。
就是SVG Drawer 文档左上角的首页链接地址是我自己本地文件，需要更换成网站么。。 辛苦了，吃糖{:5_162:} 花飞飞 发表于 2025-9-12 19:29
辛苦了，吃糖
谢糖 花飞飞 发表于 2025-9-12 19:28
所有的指令都在其中，编辑器页面还贴心的给了指令查询。。。
就是SVG Drawer 文档左上角的首页链接地址是 ...
这个可以的 花飞飞 发表于 2025-9-12 19:20
这是把工具存在网盘里了，下载本地运行，我先去下一个占着再说
看了一下网盘，编辑器早已收录进 ...
这个是另外的打包 杨帆 发表于 2025-9-12 15:37
再创新高，利他之举，功德无量！马老师您辛苦了！
{:4_190:} 梦江南 发表于 2025-9-12 14:26
谢谢黑黑老师辛苦！
{:4_190:} 这个永硕网盘很有些年头了，倒是挺稳定的{:4_187:}
这两个版本都很实用呢{:4_199:} 看黑黑的网盘，已经开发了那么多好东西呢，太厉害了{:4_199:} 红影 发表于 2025-9-12 20:39
这个永硕网盘很有些年头了，倒是挺稳定的
这两个版本都很实用呢
网盘是收费的，当然，免费的一样使用 红影 发表于 2025-9-12 20:42
看黑黑的网盘，已经开发了那么多好东西呢，太厉害了
有一点点东东吧 马黑黑 发表于 2025-9-12 21:41
网盘是收费的，当然，免费的一样使用
看里面的帖子，有些已经是十多年的了。 马黑黑 发表于 2025-9-12 21:41
有一点点东东吧
能有这么多成果，也是很伟大的成就了{:4_199:} 红影 发表于 2025-9-12 23:12
能有这么多成果，也是很伟大的成就了
是尾大 红影 发表于 2025-9-12 23:12
看里面的帖子，有些已经是十多年的了。
一直使用着 马黑黑 发表于 2025-9-12 19:30
谢糖
酒来一杯{:4_173:}