javascript 动态生成svg 折线图像

首先通过一个简单的方法了解一下javascript动态创建svg折线的方法

 function init2(){																		var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); //创建svg标签 
	svg.setAttribute("width", "800");   //设置宽度
	svg.setAttribute("height", "500");  //设置高度
	document.body.appendChild(svg);  //将标签加入到document

	var r = document.createElementNS("http://www.w3.org/2000/svg", "polyline");  //创建polyline对象，即折线对象，如果需要创建其他类型图像，												//修改 第二个参数
	 r.setAttribute("fill", "white"); 
	 r.setAttribute("points", "0,0 0,20 20,20 20,40 40,40 40,60");    //设置属性，表面的是折线经过的点的位置
	 r.setAttribute("stroke", "red");                                 //设置图像颜色
	 r.setAttribute("stroke-width", "2");                             //设置线宽
	svg.appendChild(r);                  //添加到svg标签中
 }

接下来，通过对页面添加鼠标事件或者触摸事件，达到画图的效果。