JavaScript操作SVG画像:拡大/縮小/クリック要素の取得

3746 ワード




    
        
        
        
        
        
      
        
        
        
        Hello World
	
		$(document).ready(function(){
				//        SVG  ,    PNG
			   $('.svgimg').svgmagic();
			   $(".svgZoomBtn").click(function(){
				   //findSVGElements();
				   var zoom = $(this).attr("zoom");
				   var svgId = $(this).attr("svg");
				   var cWidth = $("#"+svgId).width();
				   var cHeight = $("#"+svgId).height();
					if(zoom>0){
						cWidth += cWidth;
						cHeight +=	cHeight;
					}else if(zoom<0){
						cWidth -= cWidth*0.5;
						cHeight -=	cHeight*0.5;
					}else{
						//   
					}
					$("#"+svgId).width(cWidth);
					$("#"+svgId).height(cHeight);
			   })
			   
				var obj11 = document.getElementById("inner");
				var top11 = getTop(obj11);
				var isIE6 = /msie 6/i.test(navigator.userAgent);
				
				window.onscroll = function(){
					var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					if (bodyScrollTop > top11){
					obj11.style.position = (isIE6) ? "absolute" : "fixed";
					obj11.style.top = (isIE6) ? bodyScrollTop + "px" : "0px";
					} else {
						obj11.style.position = "static";
					}
				}
				//findSVGElements();
			});
		
		function getTop(e){
			var offset = e.offsetTop;
			if(e.offsetParent != null) offset += getTop(e.offsetParent);
			return offset;
		}
		
	    function getSubDocument(embedding_element){
			if (embedding_element.contentDocument) {
				return embedding_element.contentDocument;
			}else {
				var subdoc = null;
				try {
					subdoc = embedding_element.getSVGDocument();
				} catch(e) {}
				return subdoc;
			}
		}
					
		function findSVGElements(){
			console.log("findSVGElements");
			var elms = document.querySelectorAll(".svgimg");
			for (var i = 0; i < elms.length; i++){
				var subdoc = getSubDocument(elms[i]);
				if (subdoc){
					var allGNodes_ = subdoc.querySelectorAll("svg g");
					allGNodes = $(allGNodes_);
					allGNodes.each(function(){
						$(this).click(function(){
							if($(this).parent()[0].tagName=="g"){
								//       
								console.log("id:"+$(this).attr("id"));
						 		if($(this).find("text").length>0){
									console.log("    :"+$(this).find("text").text())
								} 
								console.log("------------------------------------");
							}
						})
					});
				}
			}
		}
		//      ,         
		//window.addEventListener("load", findSVGElements, false);
	
    
    
   



console , .