【博主推荐】html界面绘制SVG图形(附源码)
功能介绍
1.支持常用图形绘制，如直线，虚线，正方形，长方形，五角星等；
2.支持常用属性配置，如长度，颜色，id，单击时间等；
3.支持常用操作直接呈现；
4.选中元素后，鼠标右键改变属性；
5.选中元素后，鼠标左键一直按着拖动；
6.选中元素后，上下左右按键可以移动元素；
7.支持一键清除，一键保存；
8.支持元素单击，调用js；
支持相关功能扩展
效果视频
【博主推荐】html界面绘制SVG图形(附源码)
效果示意图
部分源码HTML
注意：引用的js和css相关，见下面源码地址
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>xcLeigh - 绘制svg图</title>
<link type="text/css" href="js/layui/css/layui.css" rel="stylesheet" />
<script src="js/layui/layui.js"></script>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/layer/layer.min.js"></script>
</head>
<body>
<div>
<form id="form1" class="layui-form" action="">
<div style="position:absolute;width:100%;height:100%;">
<div style="background-color:orange;">
<fieldset class="layui-elem-field" style="margin:0px;">
<legend></legend>
<div class="layui-field-box">
<div>
<table style="width:100%;">
<tr>
<td style="color:black;">
xcLeigh - 绘制svg图
</td>
<td style="text-align:right;font-size:13px;color:white;">
<a href="https://download.csdn.net/user/weixin_43151418/?spm=1003.2020.3001.5449">【博主推荐】相关资源</a> |
<a href="https://download.csdn.net/download/weixin_43151418/85329413?spm=1003.2166.3001.6637.6">C#MVC后台管理系统(附源码)</a> |
<a href="https://download.csdn.net/download/weixin_43151418/85337361?spm=1003.2166.3001.6637.1">html下拉框树形（附好看的登录界面）</a> |
<a href="https://download.csdn.net/download/weixin_43151418/85335759">HTML5响应式手机微网站(附源码)</a> |
<a href="https://download.csdn.net/download/weixin_43151418/85336631">html操作SVG图(附源码)</a>
</td>
</tr>
</table>
</div>
</div>
</fieldset>
</div>
<div id="oper1" onclick="clearYs();" style="width:100%;height:25px;padding-top:5px; background-color:white;border-bottom:1px solid #ccc; position:fixed;">
标签: <a class="layui-btn layui-btn-xs layui-bg-blue" onclick="drawLine();">直线</a>
<a class="layui-btn layui-btn-xs layui-bg-blue" onclick="drawXLine();">虚线</a>
<a class="layui-btn layui-btn-xs layui-bg-blue" onclick="drawSquare();">正方形</a>
<a class="layui-btn layui-btn-xs layui-bg-blue" onclick="drawCSquare();">长方形</a>
<a class="layui-btn layui-btn-xs layui-bg-blue" onclick="drawCircle();">圆形</a>
<a class="layui-btn layui-btn-xs layui-bg-blue" onclick="drawText();">文字</a>
<a class="layui-btn layui-btn-xs layui-bg-blue" onclick="drawStar();">五角星</a>
操作:
<a class="layui-btn layui-btn-xs layui-bg-blue" onclick="settingSvg();">设置</a>
<a class="layui-btn layui-btn-xs layui-bg-orange" onclick="resetSvg();">重置</a>
<a class="layui-btn layui-btn-xs layui-bg-cyan" onclick="getSvgContent();">保存</a>
<a class="layui-btn layui-btn-xs layui-bg-black" onclick="about();">关于</a>
</div>
<div id="oper2" onclick="clearYs();" style="width:100%;height:25px;padding-top:5px; display:none; background-color:white;border-bottom:1px solid #ccc; position:fixed;">
<span id="htmlId">ID:</span>
<div id="htmlId1" class="layui-input-inline" style="width:100px;height:25px;">
<input id="operId" name="operId" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="ID">
</div>
<span id="htmlXz">旋转:</span>
<div id="htmlXz1" class="layui-input-inline" style="width:100px;height:25px;">
<input id="operXz" name="operXz" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="度数">
</div>
<span id="htmlXz">填充色:</span>
<div id="htmlXz1" class="layui-input-inline" style="width:100px;height:25px;">
<input id="operFill" name="operFill" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="fill">
</div>
<span id="htmlZd">置顶:</span>
<div id="htmlZd1" class="layui-input-inline" style="width:100px;height:25px;">
<input id="operZd" name="operZd" title="1为置顶，其他为不变" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="置顶">
</div>
<span id="htmlStroke">边框色:</span>
<div id="htmlStroke1" class="layui-input-inline" style="width:100px;height:25px;">
<input id="operStroke" name="operStroke" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="stroke">
</div>
<span id="htmlSize">大小:</span>
<div id="htmlSize1" class="layui-input-inline" style="width:100px;height:25px;">
<input id="operSize" name="operSize" title="17px | 19px | 21px" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="大小" value="17px">
</div>
<span id="htmlText">文本值:</span>
<div id="htmlText1" class="layui-input-inline" style="width:150px;height:25px;">
<input id="operText" name="operText" title="文本内容" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="文本内容" value="">
</div>
<span id="htmlCd">长度:</span>
<div id="htmlCd1" class="layui-input-inline" style="width:100px;height:25px;">
<input id="operCd" name="operCd" title="最小长度为110" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="长度">
</div>
<span id="htmlDj">单击事件:</span>
<div id="htmlDj1" class="layui-input-inline" style="width:150px;height:25px;">
<input id="operDj" name="operDj" class="layui-input" style="padding:0px;margin:0px;height:25px;" type="text" placeholder="函数">
</div>
<a class="layui-btn layui-btn-xs layui-bg-red" onclick="removeGn();">移除</a>
<a class="layui-btn layui-btn-xs layui-bg-blue" onclick="copyGn();">复制</a>
<a class="layui-btn layui-btn-xs layui-bg-cyan" onclick="saveGn();">确定</a>
</div>
<div style="width:100%;height:25px;padding-top:5px;"></div>
<div style="width:calc(100% - 4px);height:calc(100% - 84px);padding:2px;">
<svg id="svg" width="calc(100% - 4px)" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:2px solid #ccc;"><g id="global_box" transform="translate(0,0)"></g></svg>
</div>
</div>
</form>
<script type="text/javascript" src="js/drawsvgjs/drawsvg.js"></script>
<link href="css/svg.css" style="text/css" rel="stylesheet">
</div>
</body>
</html>
1733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
