1.svg.draw.js 多边形使用实例 （在我用的时候感觉不太好用）(https://github.com/svgdotjs/svg.draw.js)
<!DOCTYPE html> <html><head><meta charset='utf-8'><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="description" content="Svg.draw.js : Demo-Page"><link rel="stylesheet" type="text/css" media="screen" href="demo.css"><title>Svg.draw.js | Demo-Page</title><style>#container{opacity: 1;}</style></head><body><div id="container"><div class="box"><button id="cancel" onclick="cancels()">清除</button><div id="polygonGridOnCtrl"><svg id="SvgjsSvg1152" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><defs id="SvgjsDefs1153"></defs><polygon id="SvgjsPolygon1154" points="0,0" stroke="#000000" stroke-width="1" fill="#ff0000"></polygon></svg></div></div></div><script src="svg.min.js"></script><script src="svg.draw.min.js"></script><script>需要修改代码///var poly3 = new SVG("SvgjsSvg1152").size('100%', '100%').polygon().draw().attr('stroke-width',3).attr('fill','#f00').attr("stroke","#ffffff");poly3.on('drawstart', function(e){document.addEventListener('keydown', function(e){if(e.keyCode == 13){poly3.draw('done');//poly3.off('drawstart');}});document.addEventListener('keyup', function(e){// poly3.draw('param', 'snapToGrid', 1);});});//双击停止poly3.on("drawstop",function(){// poly3.cancel();// poly3.draw("cancel");})function cancels(){// poly3.draw("stop");poly3.draw("cancel");// poly3.draw("cancel");console.log( document.getElementById("SvgjsSvg1152"));var div = document.getElementById("SvgjsSvg1152");while(div.hasChildNodes()) //当div下还存在子节点时 循环继续{div.removeChild(div.firstChild);}poly3 = new SVG('SvgjsSvg1152').size('100%', '100%').polygon().draw().attr('stroke-width',3).attr('fill','#f00').attr("stroke","#ffffff");// poly3.on('drawstart');}/end </script></body> </html>