svg drop drag cover 实现

最新推荐文章于 2021-07-12 22:16:22 发布

原创最新推荐文章于 2021-07-12 22:16:22 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一个基于SVG的拖拽交互实现案例。通过使用Ext库进行DOM操作，实现了SVG元素的鼠标拖拽功能，并展示了如何修改SVG元素的属性及内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>svg drag drop </title>
		<link rel="stylesheet" type="text/css"
			href="ext/resources/css/ext-all.css" /> 
		<!-- GC -->
		<!-- LIBS -->
		<script type="text/javascript" src="ext/bootstrap.js"></script> 		
		<!-- ENDLIBS -->
		<script type="text/javascript" src="ext/ext-all-debug.js"></script>  
	</head>
	
	 <script type="text/javascript">
			var svgDoc=null;
			window.onload = function() {
				 
			 	 setTimeout(function(){
				 	 var doc=document.getElementById('canvas').getSVGDocument();
				 	 svgDoc=doc;
					 var doc1=document.getElementById('sg1').getSVGDocument();  
					 var svg=doc.getElementById('svg'); 
					 var g1= doc1.getElementById('whole1'); 
					 var list=g1.childNodes;
					 doc.getElementById('whole').addEventListener('mouseover',over,false);
					 doc.getElementById('whole').addEventListener('mouseout',out,false);
					 
					  
					 /**
					 	drag drop 实现
					 */
					 
					 doc.getElementById('whole').addEventListener('mousedown',grab,false);
					 doc.getElementById('svg').addEventListener('mousemove',drag,false);
					 doc.getElementById('whole').addEventListener('mouseup',drop,false);
					 
					 
					 var copyNode= Ext.clone(g1);  
					 copyNode.setAttribute('id','newNode');
				  	 copyNode.setAttribute('transform','translate(0,0)'); 
				  	 svg.appendChild(copyNode); 
				  	 var node=document.getElementById('tmpSVG'); 
				  	 node.parentNode.removeChild(node);
				  	 var unitNode= doc.getElementById('unit');
				  	 // 动态修改Text 文字
				  	 unitNode.textContent="℃";
				  	 var values= doc.getElementById("values").childNodes;
					 for(var i=0;i<values.length;i++){
							values[i].textContent=i*10;
					 } 
					 						  
					 doc.getElementById('newNode').addEventListener('mousedown',grab,false);
					 doc.getElementById('svg').addEventListener('mousemove',drag,false);
					 doc.getElementById('newNode').addEventListener('mouseup',drop,false);
			  	 
				},200)
				  
			}; 
			//var isDrag=false;
			//var pos={x:0,y:0};
			
			var dragComponent={
				isDrag:false,
				component:null,
				posX:0,
				posY:0
			};
			function drag(){ 
				if(dragComponent.isDrag){   
					var moveX=arguments[0].clientX-dragComponent.posX;
					var moveY=arguments[0].clientY-dragComponent.posY;
					console.log(moveX,moveY);
					dragComponent.posX=arguments[0].clientX;
					dragComponent.posY=arguments[0].clientY;
					//console.log(this.getBBox());
					//console.log(this.currentTranslate); 
				 	dragComponent.component.setAttributeNS(null, "transform", "translate(" +( dragComponent.component.getCTM().e+moveX)+ "," +(dragComponent.component.getCTM().f+moveY) + ")"); 
				 	//console.log(this.getCTM());
			 	}
			}
			
			function drop(){
				//isDrag=false;
				dragComponent.isDrag=false;
				dragComponent.component=null;
				dragComponent.posX=0;
				dragComponent.posY=0;
				
			}
			
			function grab(){ 
				var currentPos={x:0,y:0}; 
				currentPos.x=arguments[0].clientX;
				currentPos.y=arguments[0].clientY; 
				DragTarget = this;
                DragTarget.parentNode.appendChild(DragTarget);
                //DragTarget.setAttributeNS(null, "pointer-events", "none");
				
				this.currentPos=currentPos;
			 	dragComponent.isDrag=true; 
			 	dragComponent.component=this;
			 	dragComponent.posX=currentPos.x;
			 	dragComponent.posY=currentPos.y;
			} 
			
			
			function over(){
			}
			function out(){
			} 
			function addEventToGTag(eventName,nodeList,fun){
				for(var i=0;i<nodeList.length;i++){
					var node=nodeList[i];
					
					 
					if(node.nodeName=="g"){
						addEventToGTag(eventName,node.childNodes,fun);	
					}else{
						if(node.nodeName=="rect"){  
							node.addEventListener(eventName,fun,false);
						}else if(node.nodeName=="circle"){
							node.addEventListener(eventName,fun,false);
						}else if(node.nodeName=="path"){ 
							node.addEventListener(eventName,fun,false);
						}else if(node.nodeName=="text"){ 
							node.addEventListener(eventName,fun,false);
						}else if(node.nodeName=="ellipse"){ 
							node.addEventListener(eventName,fun,false);
						}else if(node.nodeName=="polyine"){ 
							node.addEventListener(eventName,fun,false);
						}else if(node.nodeName=="polygon"){ 
							node.addEventListener(eventName,fun,false);
						}
						 
						
					}
				}
				
				
			}
		 
        </script>
    </head>
    <body>&nbsp;   
     <!-- 
	 <object id="sg" data="img/yb.svg" codetype="image/svg-xml"></object>
	 -->
	      
 		  
 			
 		  <object id="canvas" data="img/yb.svg" codetype="image/svg-xml"> </object> 
 		  
 		  <div id="tmpSVG">
 		  		<object id="sg1" data="img/yb1.svg" codetype="image/svg-xml" style="width:0;height:0;"></object>
		  </div>
</html>

	 height="1000"   enable-background="new 0 0 1400 600" xml:space="preserve" id='svg'>
	 <!-- 
	 
	 ############################## 图形###################################
	 -->
	  

 <g id='whole' transform="translate(-450,-150)" style="cursor:pointer;">
 
<g id="图层_1" >
	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="495.2534" y1="221.915" x2="752.3104" y2="422.7499">
		<stop  offset="0" style="stop-color:#E5E5E5"/>
		<stop  offset="1" style="stop-color:#2E2E2E"/>
	</linearGradient>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M785.631,324.105c0,38.289-13.782,74.062-35.865,101.895
		c-144.263,0-148.899,0-254.698,0.035c-22.371-27.926-35.751-63.365-35.751-101.93c0-90.109,73.048-163.157,163.157-163.157
		S785.631,233.996,785.631,324.105z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M750.7,425"/>
</g>
<g id="图层_2">
	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="508.2119" y1="232.2061" x2="739.0852" y2="412.584">
		<stop  offset="0" style="stop-color:#737373"/>
		<stop  offset="1" style="stop-color:#E5E5E5"/>
	</linearGradient>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_2_)" d="M769.013,323.987c0,34.39-12.378,66.519-32.212,91.516
		c-129.57,0-133.734,0-228.756,0.032c-20.093-25.081-32.11-56.911-32.11-91.548c0-80.931,65.607-146.539,146.539-146.539
		S769.013,243.056,769.013,323.987z"/>
</g>
<g id="图层_2_x5F_复制">
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#B3B3B3" d="M764.089,323.063c0,33.233-11.962,64.283-31.129,88.44
		c-125.217,0-129.241,0-221.07,0.031c-19.418-24.238-31.031-54.999-31.031-88.472c0-78.212,63.403-141.615,141.615-141.615
		S764.089,244.852,764.089,323.063z"/>
</g>
<g id="图层_3_x5F_复制">
	<defs>
		<path id="SVGID_3_" d="M764.013,323.049c0,33.217-11.956,64.249-31.112,88.394c-125.149,0-129.171,0-220.952,0.031
			c-19.407-24.226-31.014-54.97-31.014-88.425c0-78.169,63.369-141.539,141.539-141.539
			C700.644,181.51,764.013,244.879,764.013,323.049z"/>
	</defs>
	<clipPath id="SVGID_4_">
		<use xlink:href="#SVGID_3_"  overflow="visible"/>
	</clipPath>
	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="648.2358" y1="433.1504" x2="596.0244" y2="187.515">
		<stop  offset="0" style="stop-color:#737373"/>
		<stop  offset="1" style="stop-color:#E5E5E5"/>
	</linearGradient>
	<path clip-path="url(#SVGID_4_)" fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_5_)" d="M767.089,326.063
		c0,33.233-11.962,64.283-31.129,88.44c-125.217,0-129.241,0-221.07,0.031c-19.418-24.238-31.031-54.999-31.031-88.472
		c0-78.212,63.403-141.615,141.615-141.615S767.089,247.852,767.089,326.063z"/>
	<g id="图层_7" clip-path="url(#SVGID_4_)">
		<rect x="449" y="358" fill-rule="evenodd" clip-rule="evenodd" width="340" height="71"/>
	</g>
</g>
<g id="图层_16">
	<g>
		<path display="none" fill-rule="evenodd" clip-rule="evenodd" fill="#B3B3B3" d="M753.006,324.189
			c0,30.056-10.817,58.136-28.15,79.983c-113.245,0-116.884,0-199.933,0.028c-17.561-21.92-28.064-49.739-28.064-80.012
			c0-70.734,57.341-128.075,128.074-128.075S753.006,253.456,753.006,324.189z"/>
		<path fill="#307F00" d="M741.006,324.189c0,8.008-0.879,15.988-2.552,23.811c4.053,0,8.247,0,12.268,0
			c1.49-7.738,2.284-15.701,2.284-23.811c0-29.585-10.036-56.823-26.883-78.507c-3.152,2.568-6.735,4.448-9.563,7.22
			C732.412,273.194,741.006,298.031,741.006,324.189z"/>
	</g>
	<g>
		<path display="none" fill-rule="evenodd" clip-rule="evenodd" fill="#FF923F" d="M751.134,324.754
			c0,29.719-10.696,57.483-27.835,79.086c-111.975,0-115.573,0-197.691,0.028c-17.364-21.674-27.75-49.182-27.75-79.114
			c0-69.941,56.698-126.639,126.638-126.639S751.134,254.813,751.134,324.754z"/>
		<path fill="#FF923F" d="M724.426,246.979c-23.173-29.733-59.312-48.864-99.929-48.864c-1.082,0-2.161,0.014-3.236,0.041
			c0.432,3.951,1.224,7.901,0.963,11.852c0.757-0.015,1.514-0.028,2.273-0.028c0.184,0,0.368,0,0.552,0.001
			c30.451,0.142,59.058,12.067,80.604,33.615c3.429,3.428,6.596,7.047,9.527,10.813C717.701,251.298,721.173,249.34,724.426,246.979
			z"/>
		<path fill="#FF923F" d="M715.18,254.409c0.455,0.585,0.92,1.164,1.363,1.756c3.087-2.469,6.173-4.938,9.26-7.408
			c-0.45-0.6-0.916-1.188-1.377-1.779C721.173,249.34,717.701,251.298,715.18,254.409z"/>
	</g>
	<g>
		<path display="none" fill-rule="evenodd" clip-rule="evenodd" fill="#DF2800" d="M751.134,324.754
			c0,29.719-10.696,57.483-27.835,79.086c-111.975,0-115.573,0-197.691,0.028c-17.364-21.674-27.75-49.182-27.75-79.114
			c0-69.941,56.698-126.639,126.638-126.639S751.134,254.813,751.134,324.754z"/>
		<path fill="#DF2800" d="M512.094,348.152c-1.563-7.606-2.37-15.428-2.37-23.397c0-30.658,11.938-59.471,33.617-81.148
			c20.989-20.99,48.676-32.839,78.24-33.571c0.108-5.155,0.108-2.291,0.197-11.877c-68.685,1.447-123.919,57.567-123.919,126.6
			c0,7.876,0.726,15.581,2.102,23.059C504.067,347.331,508.01,347.947,512.094,348.152z"/>
	</g>
</g>
<g id="图层_8">
	<g id="图层_3_x5F_复制_x5F_2">
	</g>
	<g>
		<g>
			<g>
				<path display="none" fill-rule="evenodd" clip-rule="evenodd" d="M749.715,321.366c0,8.02-0.775,15.897-2.243,23.552
					c-124.463,0.249-125.294,0.301-250.043,0.108c-1.441-7.666-2.195-15.575-2.195-23.66c0-70.272,56.967-127.241,127.241-127.241
					S749.715,251.094,749.715,321.366z"/>
				<path d="M624.474,194.625c-71.539,0-129.741,58.202-129.741,129.741c0,8.106,0.753,16.223,2.238,24.122l0.383,2.035l2.07,0.003
					c5.442,0.009,14.598,0.013,19.576,0.019c0-1.658,0-3.315,0-4.974c-4.349-0.011-12.827-0.021-17.48-0.028
					c-1.186-6.951-1.787-14.067-1.787-21.17c0-68.782,55.958-124.744,124.741-124.744c68.783,0,124.741,55.957,124.741,124.739
					c0,7.025-0.614,14.098-1.828,21.055L729,345.46c0,1.667,0,3.333,0,5l22.539-0.046l0.388-2.025
					c1.519-7.917,2.288-15.999,2.288-24.022C754.215,252.827,696.013,194.625,624.474,194.625z"/>
			</g>
		</g>
		<defs>
			<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="494.733" y="194.125" width="259.482" height="156.419">
				
					<feColorMatrix  type="matrix" values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0" color-interpolation-filters="sRGB" result="source"/>
			</filter>
		</defs>
		<mask maskUnits="userSpaceOnUse" x="494.733" y="194.125" width="259.482" height="156.419" id="SVGID_6_">
			<g filter="url(#Adobe_OpacityMaskFilter)">
				
					<image overflow="visible" width="265" height="161" xlink:href="data:image/jpeg;base64,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
H0T/2Q==" transform="matrix(1 0 0 1 492 192)">
				</image>
			</g>
		</mask>
		<g opacity="0.75" mask="url(#SVGID_6_)">
			<g>
				<path display="none" fill-rule="evenodd" clip-rule="evenodd" d="M749.715,321.366c0,8.02-0.775,15.897-2.243,23.552
					c-124.463,0.249-125.294,0.301-250.043,0.108c-1.441-7.666-2.195-15.575-2.195-23.66c0-70.272,56.967-127.241,127.241-127.241
					S749.715,251.094,749.715,321.366z"/>
				<path d="M624.474,194.625c-71.539,0-129.741,58.202-129.741,129.741c0,8.106,0.753,16.223,2.238,24.122l0.383,2.035l2.07,0.003
					c5.442,0.009,14.598,0.013,19.576,0.019c0-1.658,0-3.315,0-4.974c-4.349-0.011-12.827-0.021-17.48-0.028
					c-1.186-6.951-1.787-14.067-1.787-21.17c0-68.782,55.958-124.744,124.741-124.744c68.783,0,124.741,55.957,124.741,124.739
					c0,7.025-0.614,14.098-1.828,21.055L729,345.46c0,1.667,0,3.333,0,5l22.539-0.046l0.388-2.025
					c1.519-7.917,2.288-15.999,2.288-24.022C754.215,252.827,696.013,194.625,624.474,194.625z"/>
			</g>
		</g>
	</g>
</g>
<g id="图层_9">
	<line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="621.5" y1="195" x2="621.5" y2="219"/>
	
		<line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="521.126" y1="246.509" x2="539.875" y2="261.492"/>
	
		<line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="727.873" y1="246.507" x2="709.127" y2="261.492"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="508.971" y1="270.652" x2="521.02" y2="277.049"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="499.346" y1="296.328" x2="512.645" y2="299.373"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="496.186" y1="322.455" x2="509.805" y2="323.246"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="562.449" y1="213.023" x2="569.542" y2="224.678"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="590.093" y1="201.301" x2="593.898" y2="214.4"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="540.621" y1="228.617" x2="549.37" y2="239.084"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="681.336" y1="209.429" x2="675.729" y2="221.867"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="706.629" y1="225.61" x2="697.973" y2="236.153"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="654.136" y1="200.233" x2="650.444" y2="213.366"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="749.08" y1="295.778" x2="735.916" y2="299.364"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="752.684" y1="325.587" x2="739.043" y2="325.614"/>
	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="739.873" y1="269.942" x2="727.391" y2="275.447"/>
</g>
<g id="">
	<text id="unit" transform="matrix(1 0 0 1 598.1978 303.9258)" font-family="'ArialMT'" font-size="36">kW</text>
</g>
<g id="图层_11">
	<path fill="#FF0000" d="M628.804,346.761c-2.35,5.611-8.522,8.37-13.786,6.166c-5.263-2.205-7.626-8.54-5.275-14.15
		c1.052-2.512,5.019-3.655,6.267-5.849c17.696-31.081,53.447-97.398,53.447-97.398S640.3,308.42,628.713,338.756
		C627.957,340.737,629.686,344.657,628.804,346.761z"/>
	<g id="图层_15" display="none">
		<radialGradient id="SVGID_7_" cx="625.1875" cy="338.4971" r="24.9201" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#FFFFFF"/>
			<stop  offset="0.212" style="stop-color:#D1D1D1"/>
			<stop  offset="0.4103" style="stop-color:#ACACAC"/>
			<stop  offset="0.5152" style="stop-color:#9E9E9E"/>
			<stop  offset="0.6302" style="stop-color:#A9AAA9"/>
			<stop  offset="0.8364" style="stop-color:#C7C9C7"/>
		</radialGradient>
		<circle display="inline" fill="url(#SVGID_7_)" stroke="#8A8A8A" stroke-miterlimit="10" cx="619.072" cy="343.893" r="11.871"/>
	</g>
</g>
<g id="values">
	<text transform="matrix(1 0 0 1 525 354)" font-family="'ArialMT'" font-size="30">0</text>
	<text transform="matrix(1 0 0 1 544 279)" font-family="'ArialMT'" font-size="30">30</text>
	<text transform="matrix(1 0 0 1 605 245)" font-family="'ArialMT'" font-size="30">60</text>
	<text transform="matrix(1 0 0 1 673 285)" font-family="'ArialMT'" font-size="30">90</text>
	<text transform="matrix(1 0 0 1 678 351)" font-family="'ArialMT'" font-size="30">120</text>
	
</g>
<g id="图层_13">
	<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="494" y1="456.5" x2="749" y2="456.5">
		<stop  offset="0" style="stop-color:#ADADAD"/>
		<stop  offset="0.497" style="stop-color:#D6D6D6"/>
		<stop  offset="1" style="stop-color:#858585"/>
	</linearGradient>
	<rect x="494" y="435" id="rectId" fill="url(#SVGID_8_)" width="255" height="43"/>
	<circle fill="#4D4D4D" cx="501.125" cy="445.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="501.125" cy="457.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="501.125" cy="469.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="508.125" cy="445.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="508.125" cy="457.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="508.125" cy="469.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="515.125" cy="445.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="515.125" cy="457.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="515.125" cy="469.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="726.125" cy="446.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="726.125" cy="458.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="726.125" cy="470.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="733.125" cy="446.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="733.125" cy="458.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="733.125" cy="470.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="740.125" cy="446.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="740.125" cy="458.365" r="1.966"/>
	<circle fill="#4D4D4D" cx="740.125" cy="470.365" r="1.966"/>
</g>
</g>
</svg>