SVG轨迹基础

最新推荐文章于 2022-09-21 11:37:35 发布

chunerkua9738

最新推荐文章于 2022-09-21 11:37:35 发布

阅读量287

点赞数

原文链接：https://my.oschina.net/u/4185276/blog/3100649

版权

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button name="button" onclick="input()" value="请输入坐标" style="width: 40;height: 30; color: green;">请输入坐标</button>
		<button name="button" onclick="findScale()" style="width: 40;height: 30; color: green;">查询历史轨迹</button>
		 <button name="button" onclick="clearScale()" style="width: 40;height: 30; color: green;">清除轨迹</button>
		
		<div>
		<embed src="xml/map.svg" id="embed" width="640" height="640" type="image/svg+xml"></embed>
		</div>
	</body>
	<script>
	    var scaleX="";//运动轨迹坐标
		var scaleY="";//运动轨迹坐标
		var scaleX0="";//初始坐标
		var scaleY0="";//初始坐标
	    var scaleXY=""; //生成轨迹属性值
	    var scaleHistory=[];
	    var scaleXY_history="";//记录历史坐标起点
	    var nameSpace = 'http://www.w3.org/2000/svg'; 
		var embedSvg=null;
		var path=null;
		
		
		window.onload=function(){
			 scaleX0=prompt("请输入起点X坐标");
			 scaleY0=prompt("请输入起点Y坐标");
			 scaleXY="M"+scaleX0+" "+scaleY0; 
			 scaleXY_history=scaleXY;
			 scaleHistory.push("M"+scaleX0);
			 scaleHistory.push(scaleY0);
			 embedSvg=document.getElementById("embed").getSVGDocument().getElementById("svgMap");
			 /*  绘制运动轨迹*/
		     path=document.createElementNS(nameSpace,"path");
			 drawScale(scaleXY)
			 embedSvg.appendChild(path); 
			  /*  绘制圆心*/
			 circle=document.createElementNS(nameSpace,"circle");
			 drawCircle(scaleX0,scaleY0);
			 embedSvg.appendChild(circle); 
			   /*  绘制木块*/
			 polyline=document.createElementNS(nameSpace,"polyline");
			 drawpolyline(scaleX0,scaleY0);
			 embedSvg.appendChild(polyline); 
			 
			 
		}
		function drawpolyline(scaleX,scaleY){//绘制方形木块
		    if(scaleX!="" && scaleY!=""){
		     var point0_x=scaleX;var point0_y=scaleY;
		     var point1_x=parseInt(scaleX)+30;var point1_y=scaleY;
		     var point2_x=parseInt(scaleX)+30;var point2_y=parseInt(scaleY)+30;
		     var point3_x=scaleX;var point3_y=parseInt(scaleY)+30;
		     var rectShapes=point0_x+","+point0_y+" "+point1_x+","+point1_y+" "+point2_x+","+point2_y+" "+point3_x+","+point3_y
		     
		     polyline.style="stroke:red;stroke-width:2;fill:red"; 
			 polyline.setAttribute("points",rectShapes);
			 
			
		    }
		}
		function drawCircle(scaleX,scaleY){//定位圆点 
		    if(scaleX!=null && scaleY!=null){
		     circle.style="stroke:blue;stroke-width:2;fill:none";
			 circle.setAttribute("r",2.5);
			 circle.setAttribute("cx",scaleX);
			 circle.setAttribute("cy",scaleY);
			
		    }
		}
		function drawScale(scaleXY){//轨迹
		    if(scaleX0!="" && scaleY0!=""){
		     path.style="stroke:black;stroke-width:2.5;fill:none";
			 path.setAttribute("d",scaleXY);
		    }
		}
		function input(){ 
			scaleX=prompt("请输入X坐标"); 
			scaleY=prompt("请输入Y坐标");
			scaleHistory.push(scaleX);
			scaleHistory.push(scaleY);
			if(scaleX!="" && scaleY!=""){
				scaleXY=scaleXY+"L"+scaleX+" "+scaleY;
		        drawScale(scaleXY);
		        drawCircle(scaleX,scaleY);
		        drawpolyline(scaleX,scaleY);
			}
			
			
		}
		function findScale(){
			
			for(var i=0;i<scaleHistory.length;i=i+2){
				scaleX=scaleHistory[i];
				scaleY=scaleHistory[i+1];
				if(scaleX!="" && scaleY!="" && i>1){
					scaleXY_history=scaleXY_history+"L"+scaleX+" "+scaleY;
			        drawScale(scaleXY_history);
				}else{
					scaleXY=scaleX+" "+scaleY;
				}
			}
		}
		function clearScale(){
			scaleXY="M"+scaleX0+" "+scaleY0; 
			drawScale(scaleXY);
			drawCircle(-20,-20);
			drawpolyline(-1000,-1000);
		}
	</script>
</html>

svg代码：

转载于:https://my.oschina.net/u/4185276/blog/3100649