加載到div後動畫SVG與捕捉

我剛開始使用snap.svg工作，我有點迷路。加載到div後動畫SVG與捕捉

我想實現的是以下內容。從我的JavaScript文件中，我想要將SVG加載到div中。然後，一旦徘徊在SVG內的A元素上就會生成動畫。我已經能夠在頁面上使用這段代碼，但我想將所有JavaScript代碼保存在JavaScript文件中。

下面是在頁面的代碼，目前的工作：

window.onload = function() { 
    var s = Snap(100, 100); 
    Snap.load("/flatui/images/icons/responsive.svg", function (f) { 

     redSomething = f.select("#phone"); 

     redSomething.hover(function() { 
      redSomething.animate({ transform: 't100,0' }, 2000); 
     }); 

     s.append(f); 
    }); 

};

這裏是我想在我的JS文件運行代碼：

var s = Snap(".responsive-ani"); 
var l = Snap.load("/flatui/images/icons/responsive.svg", onSVGLoaded) ; 

function onSVGLoaded(data){ 
redSomething = l.select("#phone"); 
redSomething.hover(function() { 
    redSomething.animate({ transform: 't100,0' }, 2000); 
}); 
s.append(data); 
}

來源

2014-02-23 Zackskeeter

我想你可能需要更改Snap（「.response-ani」）;選擇要使用的div的ID，而不是類，或者讓Snap創建svg元素，如Snap（400,400）;如果你可以在jsfiddle或jsbin上彈出這個例子，應該會更容易檢查。 – Ian

寫了不同的看法，現在它似乎工作，使用jQuery的懸停。

window.onload = function() { 
var s = Snap(".responsive-icon"); 
var l = Snap.load("http://new.beresponsive.co.za/wp-content/themes/responsive/flatui/images/icons/responsive.svg", function(f) { 
phone = f.select("#phone"); 
tablet = f.select("#tablet"); 
jQuery('.responsive-icon').hover(function() { 
    phone.animate({ transform: 't-52,12' }, 300); 
    tablet.animate({ transform: 't20,-15' }, 300); 
},function(){ 
    phone.animate({ transform: 't0,0' }, 600); 
    tablet.animate({ transform: 't0,0' }, 600); 
}); 
s.append(f); 
}); 
}

來源

2014-02-25 06:58:09 Zackskeeter

加載到div後動畫SVG與捕捉

回答

相關問題