svg实例

该例实现了，画线，圆，矩形，以及选择图形，并把图形至于顶层，还有拖动图形等功能。对于使用Javascript语言分析SVG文件有很大的帮助。感谢不知名的提供者。
http://www.cnblogs.com/mydriverc/archive/2008/01/21/1047563.html


<?xml version="1.0" encoding="iso-8859-1"?>
<svg id="svg" viewBox="0 0 1006 616">
<script type="text/javascript">
<![CDATA[
//编辑 删除
//----------------draw circle---------------------
var xCenter;
var yCenter;
var rCircle;
var circleFlag=0;
var codeCircle;
var sd=document.getElementById("SD");
  function drawCircle(){

    var newCircle=document.createElement("circle");
    xCenter=evt.getClientX();
    yCenter=evt.getClientY();
    newCircle.setAttribute("cx",xCenter);
    newCircle.setAttribute("cy",yCenter);
    newCircle.setAttribute("r",0);
    newCircle.setAttribute("stroke","red");
    newCircle.setAttribute("stroke-width","1");
    newCircle.setAttribute("fill","blue");
    var plat=document.getElementById("plat");
    plat.appendChild(newCircle);
    circleFlag=1
   }
   function modifyCircle(){
   if(circleFlag==1){
var plat=document.getElementById("plat");
var theCircle=plat.lastChild;
var screenX =evt.getClientX();
var screenY =evt.getClientY();
x=screenX-xCenter;
y=screenY-yCenter;
rCircle= parseInt(Math.sqrt(x*x+y*y));
theCircle.setAttribute("r",rCircle);
}
   }
function endCircle(){
//codeCircle="<circle cx=""+xCenter+"" cy=""+yCenter+"" r=""+rCircle+""  stroke="red" stroke-width="1"

fill="blue" />";
//codeAll=codeAll+codeCircle;
circleFlag=0;
var plat=document.getElementById("plat");
theCircle=plat.lastChild;
plat.appendChild(theCircle);
sd.firstChild.setData(codeCircle);
   }
//-----------------draw rect----------------------
var xRectStart;
var yRectStart;
var rectFlag=0;
var codeRect;
var widthRect;
var heightRect;
var sd=document.getElementById("SD");
  function drawRect(){
    var newRect=document.createElement("rect");
    xRectStart=evt.getClientX();
    yRectStart=evt.getClientY();
    newRect.setAttribute("x",xRectStart);
    newRect.setAttribute("y",yRectStart);
    newRect.setAttribute("width",0);
    newRect.setAttribute("height",0);
    newRect.setAttribute("stroke","red");
    newRect.setAttribute("stroke-width","1");
    newRect.setAttribute("fill","blue");
    var plat=document.getElementById("plat");
    plat.appendChild(newRect);
    rectFlag=1
   }
   function modifyRect(){
   if(rectFlag==1){
var plat=document.getElementById("plat");
var theCircle=plat.lastChild;
var screenX =evt.getClientX();
var screenY =evt.getClientY();
widthRect=screenX-xRectStart;
heightRect=screenY-yRectStart;
theCircle.setAttribute("width",widthRect);
theCircle.setAttribute("height",heightRect);
}
   }
  function endRect(){
//codeRect="<rect x=""+xRectStart+"" y=""+yRectStart+"" width=""+widthRect+"" height=""+heightRect+""

stroke="red" stroke-width="1" fill="blue" />";
//codeAll=codeAll+codeRect;
rectFlag=0;
var plat=document.getElementById("plat");
theRect=plat.lastChild;
plat.appendChild(theRect);
sd.firstChild.setData(codeRect);
   }
//---------------------draw with Image---------
var xImageScreen;
var yImageScreen;
var plat;
var switchScr="12.jpg";
var imageFlag;
var codeImage;
var sd=document.getElementById("SD");
function startImage(){
plat=document.getElementById("plat");
var newImg=document.createElement("image");
xImageScreen=evt.getClientX();
yImageScreen=evt.getClientY();
newImg.setAttribute("x",xImageScreen);
newImg.setAttribute("y",yImageScreen);
newImg.setAttribute("width","60");
newImg.setAttribute("height","60");
newImg.setAttributeNS("http://www.w3.org/2000/xlink/namespace/","xlink:href",switchScr);
plat.appendChild(newImg);
imageFlag=true;
}
function modifyImage(){
if(imageFlag==true){
theImg=plat.lastChild;
xImageScreen=evt.getClientX();
yImageScreen=evt.getClientY();
theImg.setAttribute("x",xImageScreen);
theImg.setAttribute("y",yImageScreen);
}
}
function endImage(){
//codeImage="<image x=""+xImageScreen+"" y=""+yImageScreen+"" width="60" height="60"

xlink:href=""+switchScr+""/>";
//codeAll=codeAll+codeImage;
theImg=plat.lastChild;
plat.appendChild(theImg);
imageFlag=false;
sd.firstChild.setData(codeImage);
}
//---------------------drawLine()----------------------
var xLineEnd=0;
var yLineEnd=60;
var xLineStart;
var yLineStart;
var lineFlag=false;
var codeLine;
var sd=document.getElementById("SD");
  function drawLine(){
   var newLine=document.createElement("line");
    xLineStart=evt.getClientX();
    yLineStart=evt.getClientY();
    newLine.setAttribute("x1",xLineStart);
    newLine.setAttribute("y1",yLineStart);
    newLine.setAttribute("x2",xLineEnd);
    newLine.setAttribute("y2",yLineEnd);
    newLine.setAttribute("stroke","red");
    newLine.setAttribute("stroke-width","2");
    var plat=document.getElementById("plat");
    plat.appendChild(newLine);
    lineFlag=true;
   }
  function modifyLine(){
   if(lineFlag==true){
    var plat=document.getElementById("plat");
var theLine=plat.lastChild;
xLineEnd =evt.getClientX();
yLineEnd =evt.getClientY();
theLine.setAttribute("x2",xLineEnd);
  theLine.setAttribute("y2",yLineEnd);
    }
  }
  function endLine(){
// codeLine="<line x1=""+xLineStart+"" y1=""+yLineStart+"" x2=""+xLineEnd+"" y2=""+yLineEnd+""

stroke="red" stroke-width="2" />";
  // codeAll=codeAll+codeLine;
   lineFlag=false;
    var plat=document.getElementById("plat");
    theLine=plat.lastChild;
    plat.appendChild(theLine);
    xLineEnd=0;
    yLineEnd=60;
   sd.firstChild.setData(codeLine);
  }
//------------------drag images-------------------
var targetMaxtrix;
var dragTarget;
var dragStartX;
var dragStartY;
var dragFlag=false;
//var backRect=document.getElementById("backRect");
var dragID;
//var hasTransform;
function startDrag(){
dragTarget=evt.target;
dragID=dragTarget.getAttribute("id");
if(dragID!="backRect"){
//dragID=dragTarget.getAttribute("id");
dragStartX=evt.getClientX();
dragStartY=evt.getClientY();
targetMaxtrix=dragTarget.getCTM();
dragFlag=true;
}
}
function modifyDrag(){
if(dragFlag){
dragModifyX=evt.getClientX();
dragModifyY=evt.getClientY();
distanceX=dragModifyX-dragStartX;
distanceY=dragModifyY-dragStartY;
newTranX=targetMaxtrix.e+distanceX;
newTranY=targetMaxtrix.f+distanceY;
dragTarget.setAttributeNS(null, 'transform', 'translate(' + newTranX + ',' + newTranY + ')');
}
}
function endDrag(){
if(dragFlag){dragTarget.parentNode.appendChild(dragTarget);}
dragFlag=false;
}
//---------------------common function---
function getActiveId(){
var id=0;
for(i=0;i<toolStatus.length;i++){
  if(toolStatus[i]==1){
   id=i;
   break;
  }
}
return id;
}
function newFile(){
alert("0");
var p=document.getElementById("plat");
var l=p.childNodes.length;
while(l!=1){
p.removeChild(p.lastChild);
l=p.childNodes.length;
}
codeAll="<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%"

xmlns:xlink="http://www.w3.org/1999/xlink">";
}
//-#############################--operate files-----############################
function saveFile(){
var codeContent="";
//codeAll=codeAll+codeEnd
//-----------saveObject--------------
p=evt.target.ownerDocument.getElementById("plat");
nodeList=p.childNodes;
//------------------learn new knowledge printNode(node)----------------------
for(i=0;i<nodeList.length;i++){
codeContent=codeContent+printNode(nodeList.item(i))+" ";
}
alert(codeContent);
codeAll=codeAll+codeContent;
codeAll=codeAll+codeEnd;
//---------save file --------
var fso, f1;
fso = new ActiveXObject("Scripting.FileSystemObject");
f1 = fso.CreateTextFile(fileName, true); 
f1.WriteLine(codeAll);
f1.Close();
alert("the location of the file : "+fileName);
//--------------------
//codeAll=codeAll.substring(0,codeAll.length-6);
codeAll="<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%"

xmlns:xlink="http://www.w3.org/1999/xlink">";
}
//---------------open file---------------------
function openFile(){
xmlDoc = getURL(fileName,fn)
}
function fn(xmlDoc)
{
alert("the location of the opened file: "+fileName);
var x = parseXML(xmlDoc.content,document)
openFilePlat=document.getElementById("plat");
var nodeList=x.getChildNodes();
var nodeListInner=nodeList.item(0).getChildNodes();
removeAllChild();//clear all the Elements in <g>
for(i=0;i<nodeListInner.length;i++){
if(nodeListInner.item(i).nodeType==1){
openFilePlat.appendChild(nodeListInner.item(i));
}
}
}
function removeAllChild(){
var platRemoveAll=document.getElementById("plat");
var removeAllLength=platRemoveAll.childNodes.length;
while(removeAllLength!=0){
platRemoveAll.removeChild(platRemoveAll.lastChild);
removeAllLength=platRemoveAll.childNodes.length;
}
}
//--#############################common vars########################
//-----------file vars-----------------------
var codeAll="<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%"

xmlns:xlink="http://www.w3.org/1999/xlink">";
var codeEnd="</svg>";
var fileName="./svgFile/test.svg";
//-------------------mainDraw-----------------
function startDraw(){
id=getActiveId();
switch(id){
case 0 :{startDrag();break;}
case 1 :{ drawRect();break;}
case 2 :{ drawCircle();break;}
case 3 :{ drawLine();break;}
case 4 :{ startImage();break;}
}

}
function modifyDraw(){
     id=getActiveId();
     switch(id){
case 0 :{modifyDrag();break;}
case 1 :{ modifyRect();break;}
case 2 :{ modifyCircle();break;}
case 3 :{ modifyLine();break;}
case 4 :{ modifyImage();break;}
}
    
   
}
function endDraw(){
     id=getActiveId();
     switch(id){
case 0 :{endDrag();break;}
        case 1 :{ endRect();break;}
case 2 :{ endCircle();break;}
case 3 :{ endLine();break;}
case 4 :{ endImage();break;}
}
   
    
}
//---------------------------------------
//-------------------------changStatus And hiddenTool----------
var toolStatus=new Array(1,0,0,0,0);
var toolName=new Array('move','rect','circle','line','switch');
function changeStatus(name){
var id=0;
for(i=0;i<toolName.length;i++){
if(name==toolName[i]){
  id=i;
  break;
}
}
for(i=0;i<toolStatus.length;i++){
if(id==i){
toolStatus[i]=1;
}else{
toolStatus[i]=0;
}
}
showHidden1(id);
}
function showHidden1(id){
if(toolStatus[id]==1){
theMove=document.getElementById(id);
theMove.setAttribute("display", "inline");
setTimeout('showHidden2('+id+')',500);
}else{
theMove=document.getElementById(id);
theMove.setAttribute("display", "inline");
}
}
function showHidden2(id){
if(toolStatus[id]==1){
theMove=document.getElementById(id);
theMove.setAttribute("display", "none");
setTimeout('showHidden1('+id+')',500);
}else{
theMove=document.getElementById(id);
theMove.setAttribute("display", "inline");
}
}
]]>
</script>
<g id="plat"  onmousedown="startDraw()" onmousemove="modifyDraw()" onmouseup="endDraw()">
<rect id="backRect" x="0" y="60" width="720" height="450" fill="white"
     stroke="gray" stroke-width="1"/>
</g>
<g id="saveFlie" onclick="saveFile()">
  <rect  x="498" y="527" width="45" height="25" stroke="black" stroke-width="1" fill="white"/>
  <text  x="500" y="545" style="stroke:#83C75D;font-size:20">Save</text>
</g>
<g id="newFie" onclick="newFile()">
  <rect  x="578" y="527" width="45" height="25" stroke="black" stroke-width="1" fill="white"/>
  <text  x="584" y="545" style="stroke:#83C75D;font-size:20"> New</text>
</g>
<g id="openFie" onclick="openFile()">
  <rect  x="658" y="527" width="45" height="25" stroke="black" stroke-width="1" fill="none"/>
  <text  x="662" y="545" style="stroke:#83C75D;font-size:20"> Open</text>
</g>
<text id="SD" fill="#FFFFFF" stroke="black" x="1" y="40">show code</text>
<polyline id="0" points="40,546 50,563 42,557 38,566 40,546"
     stroke="#426EB4" fill="blue" onclick="changeStatus('move')"/>
  <rect id="1" x="70" y="544.5" width="25" height="20" stroke="#426EB4"
     fill="blue" onclick="changeStatus('rect')"/>
<circle id="2" cx="130" cy="555.5" r="12" stroke="#426EB4"
     fill="blue" onclick="changeStatus('circle')"/>
<polyline id="3" points="183,559 190,543 194,546 187,562 182.5,565.5 183,559 187,562"
     stroke="#555555" fill="blue" onclick="changeStatus('line')"/>
<image id="4" x="220" y="535" width="40" height="40"
xlink:href="12.jpg" onclick="changeStatus('switch')"/>
</svg>