javascript - 加载到 div 后使用 snap 为 SVG 制作动画

Question

我刚刚开始使用 snap.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 );
}

Answer 1

以不同的方式编写它，现在它似乎可以工作，使用 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 );
});
}