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

加载到div后，使用快照动画SVG

1 个答案: