利用svg实现画线

概述：在svg中画一矩形用来当作用户画图区域，利用四个Test元素（选择起始点、选择终止点、画线、清空）的click事件依次实现相应的功能。利用Group元素实现画图节点的填充容器。
（一）svg文件说明
1，画rect代码

<rect x="0.137" y="-4.646" onclick="DrawSvgCircle(evt)"  fill="#ADFF5F" stroke="#000000" stroke-width="0.7078" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="500" width="594.566" height="247.729"/>

2，画text代码

<text transform="matrix(1 0 0 1 61.1379 266.7664)" font-family="'SimSun'" font-size="21" onclick="selectedStart()">选择起始点</text>
<text transform="matrix(1 0 0 1 212.1379 267.7664)" font-family="'SimSun'" font-size="21" onclick="selectedEnd()">选择终止点</text>
<text transform="matrix(1 0 0 1 353.1375 266.7664)" font-family="'SimSun'" font-size="21" onclick="drawline()">画线</text>
<text transform="matrix(1 0 0 1 429.1375 265.7664)" font-family="'SimSun'" font-size="21" onclick="cancle()">清空</text>

3，group节点代码

<g id="g5">
</g>

4，引用外部lib1.js文件
<script  language="JavaScript" xlink:href="lib1.js"></script>
（二）脚本文件
1,圆类

/**//****************************************************************************
画园类
    
    
*****************************************************************************/
function SvgCircle(x,y,r,color,width)
{
    this.x=x;
    this.y=y;
    this.r=r;
    this.color=color;
    this.width=width;
    this.DrawCircle=DrawCircle;
    
}
function DrawCircle()
{
    var circle=document.createElement("circle");
     circle.setAttribute("cx",this.x);
     circle.setAttribute("cy", this.y);
     circle.setAttribute("r",this.r);
     circle.getStyle().setProperty("stroke",this.color);
     circle.getStyle().setProperty("stroke-width",this.width);
    return circle;    
    
    
}
/**//****************************************************************************
画园类
    
    
*****************************************************************************/

2，线类

/**//****************************************************************************
画线类
    
    
*****************************************************************************/
function SvgLine(x1,y1,x2,y2,linecolor,linewidth)
{
this.x1=x1;
this.y1=y1;
this.x2=x2;
this.y2=y2;
this.linecolor=linecolor;
this.linewidth=linewidth;
this.DrawLine=DrawLine;
}
function DrawLine()
{
    
 //  var target = get_target(evt);
//   var svgdoc = target.getOwnerDocument();
   var line=document.createElement("line");
    line.setAttribute("x1",this.x1);
    line.setAttribute("y1", this.y1);
    line.setAttribute("x2", this.x2);
    line.setAttribute("y2", this.y2);
    line.getStyle().setProperty("stroke",this.linecolor);
    line.getStyle().setProperty("fill",this.linecolor);
    line.getStyle().setProperty("stroke-width",this.linewidth);
    return line;    
}
/**//****************************************************************************
画线类
    
    
*****************************************************************************/

3，事件

var start=false;
var end=false;
var sx;
var sy;
var endx;
var endy;
/**//****************************************************************************
事件    
*****************************************************************************/
function selectedStart()
{
    
    start=true;
    
}
function selectedEnd()
{
    end=true;
    
}
function DrawSvgCircle(evt)
{
    if(start)
    {
        
         sx = evt.getClientX();
         sy= evt.getClientY();
         var c1=new SvgCircle(sx,sy,"2","red","2");
          var circle=c1.DrawCircle();
         var group=document.getElementById("g5");
         group.appendChild(circle);
        // document.getDocumentElement().appendChild(group);    
        
    
    start=false;
    }
    if(end)
    {
            endx = evt.getClientX();
            endy= evt.getClientY();
             var c1=new SvgCircle(endx,endy,"2","red","2");
          var circle=c1.DrawCircle();
         var group=document.getElementById("g5");
         group.appendChild(circle);
         //document.getDocumentElement().appendChild(group);    
            end=false;
    }
}
function drawline()
{
 var l=new     SvgLine(sx,sy,endx,endy,"red","2");
 var line=l.DrawLine();
  var group=document.getElementById("g5");
 group.appendChild(line);
// document.getDocumentElement().appendChild(group);    
 
}
function cancle()
{
    var group=document.getElementById("g5");
    for(var i=0;i<group.childNodes.length;i++)
    {
      group.removeChild(group.childNodes.item(i));    
    }
    //var lines=group.getElementsByTagName("line");
//    var circles=group.getElementsByTagName("circle");
    /**//*for(var i=0;i<lines.length;i++)
     {
          group.removeChild(lines.item(i));
     }
     for(var i=0;i<circles.length;i++)
     {
          group.removeChild(circles.item(i));
     }*/
}

总结：
1，不足：没有实现在text元素上鼠标变形；在刷屏时不能全部清空所画对象，谁能够实现请指教
2，继续学习DOM
全部源码