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);