SVG 画线

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" 
	 xmlns:xlink="http://www.w3.org/1999/xlink" onload="Init(evt);"
	 onmousemove="drag(evt)"
 	onmouseup="drop(evt)"
 	onmousedown="cliquer(evt)" >
	
<script type="text/javascript"><![CDATA[
var dragTarget;
var bool = false;
var greenC;
var redC;
var line;
var x;
var y;
	function Init(evt){
			greenC = document.getElementById('greenC')
			redC = document.getElementById('redC')
			line = document.getElementById('line')
	};
	function drag(evt){
		x = evt.clientX;
		y = evt.clientY;
		if(evt.target.nodeName == 'rect'){
			var text = document.getElementById('text')
			redC.setAttributeNS(null,'visibility','visible');
			text.firstChild.nodeValue=evt.clientX+"："+evt.clientY;
			if(dragTarget && (bool==true)){ // 已经压下 拖动rect
				dragTarget.parentNode.appendChild(dragTarget);
				dragTarget.setAttributeNS(null,'x',x-dragxWidth);
				dragTarget.setAttributeNS(null,'y',y-dragyHeight);
			}
		} // else hidden
		if(dragTarget && (bool==true) ){  //不为空
			if(dragTarget.id == 'redC'){
				dragTarget.parentNode.appendChild(dragTarget);
				var points = line.getAttributeNS(null,'points').split(' ');
				
				points[points.length-1] = x+","+y;
				line.setAttributeNS(null,'points',points.join(' '));
				
				redC.setAttributeNS(null,'cx',x);
				redC.setAttributeNS(null,'cy',y);
			}
		}
	}
	
	function drop(evt){//当放下的时候 为 line多添加
		bool = false;
		
		if(dragTarget){  //不为空
			if(dragTarget.id == 'redC'){
				var line1 = line.getAttributeNS(null,'points').split(' ');
				var linepoint = line.getAttributeNS(null,'points')+" "+line1[line1.length-1];
				line.setAttributeNS(null,'points',linepoint);
				//alert(linepoint);
			}
		}	
	}
var dragxWidth;
var dragyHeight;	
	function cliquer(evt){
		 bool = true;
		 dragTarget = evt.target;
		 
		 dragxWidth = evt.clientX-dragTarget.getAttribute('x');
		 dragyHeight =evt.clientY-dragTarget.getAttribute('y');
		 
	}
]]></script>
<g>
	<rect width="102" height="52" rx="5" ry="5" x="20" y="20"  fill="white" stroke="rgb(99,99,99)" stroke-width="2"/>
	
	<polyline id="line" points="102,250 102,250" style="stroke:rgb(99,99,99);stroke-width:2; fill:none"></polyline>
	<circle id="redC" cx="102" cy="250" r="5" fill="red" visibility="hidden"></circle>	
</g>

 
<text x="500" y="400" id="text" fill="red">拖动红色的圆点</text>
</svg>

评论

1 楼 夕雨下 2011-11-01  

首先要出发一下矩形的mouseover事件 ，再点击红色的按钮