Weblabor

<input type="text" id="emlites_szama" value="0" />
<button onclick="(document.getElementById('emlites_szama').value)" />Frissít</button>

<script>
			var svgObj,svgDoc,layersDiv;
			var x0,y0,sx0,sy0,sw,sh,dragging=false;
			var layers=[];
			   
			function init() {
				svgObj=document.getElementById('svgobj'); // a tartalmazó <object> elem
				svgDoc=svgObj.contentDocument.getElementsByTagName('svg')[0]; // a beágyazott fájl első <svg> eleme
				layersDiv=document.getElementById('layers');
				var id,scrollEvent;

				svgDoc.addEventListener('mousedown', function(e) {
					var ex=e.pageX-svgObj.offsetLeft;
					 var ey=e.pageY-svgObj.offsetTop;
					 var w=svgObj.clientWidth;
					 var h=svgObj.clientHeight;
					 var dims=svgDoc.getAttribute('viewBox').split(' ');
					 sx0=parseFloat(dims[0]);sy0=parseFloat(dims[1]);sw=parseFloat(dims[2]);sh=parseFloat(dims[3]);
					 x0=ex/w;
					 y0=ey/h;
					 dragging=true;
				}, false); 
     
				svgDoc.addEventListener('mousemove', function(e) {
					if (dragging) {
					   var ex=e.pageX-svgObj.offsetLeft;
					   var ey=e.pageY-svgObj.offsetTop;
					   var w=svgObj.clientWidth;
					   var h=svgObj.clientHeight;
					   var x=ex/w;
					   var y=ey/h;
					   var nx0=sx0-(x-x0)*sw;
					   var ny0=sy0-(y-y0)*sh;
					   svgDoc.setAttribute('viewBox',nx0+' '+ny0+' '+sw+' '+sh);
					}
				}, false); 
     
				svgDoc.addEventListener('mouseup', function(e) {
					dragging=false;
				}, false); 
     
				svgDoc.addEventListener('DOMMouseScroll',scrollEvent=function(e) {
					 var d=(typeof(e.wheelDelta)!='undefined')?e.wheelDelta:-e.detail;
					 var ex=e.pageX-svgObj.offsetLeft;
					 var ey=e.pageY-svgObj.offsetTop;
					 var w=svgObj.clientWidth;
					 var h=svgObj.clientHeight;
					 var x=ex/w;
					 var y=ey/h;
					 var dims=svgDoc.getAttribute('viewBox').split(' ');
					 
					 for(var i=0;i<dims.length;i++)
					   dims[i]=parseFloat(dims[i]);
					
					if (d>0) {
						   dims[0]+=x*dims[2]/2;
						   dims[1]+=y*dims[3]/2;
						   dims[2]/=2;
						   dims[3]/=2;
					} else {
						   dims[0]-=x*dims[2];
						   dims[1]-=y*dims[3];
						   dims[2]*=2;
						   dims[3]*=2;
					}
					
					svgDoc.setAttribute('viewBox',dims.join(' '));
					// újraállítjuk a draggelésnél használt globális változókat, hátha valaki draggelés közben zoomolt
					sx0=dims[0];sy0=dims[1];sw=dims[2];sh=dims[3];x0=x;y0=y;
				}, false);
				
				svgDoc.addEventListener('mousewheel',scrollEvent);
			}
   
			function frissit(ertek) {    
				var mt=svgDoc.getElementsByTagName('metadata');
     
				for (var i=0;i<mt.length;i++) {
					var odm=mt[i].getElementsByTagName('odm');
					for (var j=0;j<odm.length;j++)
         
					if (odm[j].getAttribute('name')=='emlites_szama')
						mt[i].parentNode.style.visibility=(parseInt(odm[j].getAttribute('value'))>ertek)?'visible' 'hidden';
				}  
			}

			function highlightLayer(id) {
				var l=svgDoc.getElementById(id);
				var p=l.getElementsByTagName('*');
				
				for (var i=0;i<p.length;i++)
					
					if (['path','polygon','text'].indexOf(p[i].tagName)>=0) {
						p[i].style.stroke='red';
					}
			}
		</script>