加载到 div 后使用 snap 为 SVG 设置动画答案

【问题标题】：Animating SVG with snap after loading into div加载到 div 后使用 snap 为 SVG 设置动画
【发布时间】：2014-02-23 20:10:58
【问题描述】：

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

【问题讨论】：

我认为您可能需要更改 Snap(".responsive-ani");选择要使用的 div 的 Id，而不是类，或者让 Snap 创建 svg 元素，例如 Snap(400,400)；如果你可以在 jsfiddle 或 jsbin 上弹出示例，它应该更容易检查。

标签： javascript jquery svg snap.svg

【解决方案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 );
});
}

【讨论】：