1

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

1 回答 1

0

以不同的方式编写它，现在它似乎可以工作，使用 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-25T06:58:09.867 回答