参考网站：http://dayu.pw/svgcontrol/
主要功能：手动可视化生成 SVG图片PATH路径。
效果如下：
代码如下：
1 <!DOCTYPE html> 2 <!-- 参考：http://dayu.pw/svgcontrol/ --> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>SVG PATH路径生成</title> 7 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 8 <style> 9 body{ 10 background: #ccc; 11 font-family: 'Microsoft YaHei'; 12 color: #345; 13 } 14 .svg-inner{ 15 width: 900px; 16 height: 600px; 17 margin: 0 auto; 18 background: #fff; 19 } 20 #svgMain{ 21 -webkit-user-select: none; 22 -moz-user-select: none; 23 -ms-user-select: none; 24 box-shadow:0px 3px 13px #333333; 25 } 26 #svgMain circle{ 27 cursor: pointer; 28 fill:rgba(200,200,200,1);stroke:rgba(200,200,200,1);stroke-width:3 29 } 30 #svgMain polyline{ 31 fill:rgba(200,200,200,0);stroke:rgba(200,200,200,1);stroke-width:1 32 } 33 h1, h4{ 34 text-align:center; 35 margin:10px; 36 } 37 </style> 38 39 <h1>贝塞尔曲线控制</h1> 40 <h4>M200 250 C141.5 130 421.5 146 500 250</h4> 41 <div style="text-align:center; margin-bottom:10px;"> 42 <label><input type="checkbox" id="chkZ" />闭合</label> 43 44 <select id="selType"> 45 <option value="M">M 移动</option> 46 <option value="L" selected>L 画线到</option> 47 <option value="H">H 水平绘制</option> 48 <option value="V">V 竖直绘制</option> 49 <option value="C">C 三次贝塞尔</option> 50 <option value="S">S 三次贝塞尔对称</option> 51 <option value="Q">Q 二次贝塞尔</option> 52 <option value="T">T 二次贝塞尔连续</option> 53 </select> 54 *双击可添加控制点 55 </div> 56 <div class="svg-inner"> 57 <svg width="100%" height="100%" id="svgMain" xmlns="http://www.w3.org/2000/svg" version="1.1"> 58 <polyline points=""></polyline> 59 <path d="" style="fill:rgba(0,0,0,0);stroke:#345;stroke-3"></path> 60 <circle data-type="M" cx="200" cy="250" r="5"></circle> 61 <circle data-type="C" cx="141.5" cy="130" r="5"></circle> 62 <circle data-type="C" cx="421.5" cy="146" r="5"></circle> 63 <circle data-type="C" cx="500" cy="250" r="5"></circle> 64 </svg> 65 </div> 66 67 <script> 68 $(function(){ 69 $('#svgMain').dblclick(function(e){ 70 var cx = e.pageX-$(this).parent().offset().left; 71 var cy = e.pageY-$(this).parent().offset().top; 72 73 var circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); 74 circle.setAttribute("cx", cx); 75 circle.setAttribute("cy", cy); 76 circle.setAttribute("r", 5); 77 circle.setAttribute("data-type", $('#selType').val()); 78 $(this).append(circle); 79 setPoints($(circle)); 80 setPolyline(); 81 setPath(); 82 }); 83 84 $('#svgMain circle').each(function(){ 85 setPoints($(this)); 86 }); 87 88 $('#chkZ').change(function(){ 89 setPolyline(); 90 setPath(); 91 }); 92 93 setPolyline(); 94 setPath(); 95 }); 96 97 function setPoints(obj) 98 { 99 var mouseDown=false; 100 obj.mousedown(function(){ 101 mouseDown=true; 102 }); 103 obj.parent().mouseup(function(){ 104 mouseDown=false; 105 }); 106 obj.parent().mousemove(function(e){ 107 e.preventDefault(); 108 if(mouseDown) 109 { 110 obj.attr('cx',e.pageX-obj.parent().offset().left); 111 obj.attr('cy',e.pageY-obj.parent().offset().top); 112 setPolyline(); 113 setPath(); 114 } 115 }); 116 } 117 118 function setPolyline() 119 { 120 var points = ''; 121 $('#svgMain circle').each(function(){ 122 123 points += $(this).attr('cx') + ',' + $(this).attr('cy') + ' '; 124 }); 125 126 $('#svgMain polyline').attr('points', points); 127 } 128 129 function setPath() 130 { 131 var d = ''; 132 var lastType = ''; 133 $('#svgMain circle').each(function(){ 134 var cx = $(this).attr('cx'); 135 var cy = $(this).attr('cy'); 136 var t = $(this).data('type'); 137 if (lastType != t || t == 'M'){ 138 d += t; 139 } 140 141 if (t == 'H') { 142 d += cx + ' '; 143 } else if (t == 'V') { 144 d += cy + ' '; 145 } else { 146 d += cx + ' ' + cy + ' '; 147 } 148 149 lastType = t; 150 }); 151 152 if ($('#chkZ')[0].checked) 153 { 154 d += ' Z'; 155 } 156 157 $('h4').html(d); 158 $('#svgMain path').attr('d', d); 159 } 160 </script> 161 162 </body></html>