如何使用Snap SVG创建鼠标悬停动画？

我使用Snap.svg创建悬停地图动画，但我似乎遇到了动画部分的问题。地图创建于Illustrator，并作为SVG文件导出，并链接到HTML页面。如何使用Snap SVG创建鼠标悬停动画？

一旦我添加下面的代码，一切都消失了。

veryCold.mouseover(function() { 
    this.animate({ 
     fill: "#ff0000" 
    }, 600); 
}).mouseout(function() { 
    this.animate({ 
     fill: "#bada55" 
    }, 200);

我是Stack Overflow的新手，所以如果您需要任何其他信息，请告诉我。任何帮助你可以提供将不胜感激。谢谢！

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Snap.svg</title> 
     <style> 
     body { 
      background: #333; 
      } 
     </style> 
     <script src="Snap.svg-0.4.1/dist/snap.svg.js"></script> 
     <script src="Snap.svg-0.4.1/dist/snap-min.svg.js"></script> 
    </head> 
    <body> 
     <svg width="0" height="0"> 

     </svg> 
     <script> 
      var s = Snap(1080, 700); 

      Snap.load("BuildingAmerica_ClimateMap_Vector-CJ-20150129-Buttons.svg", function(f) { 
       var g = f.selectAll("g"), 
        wra = f.selectAll("path[class='st0']").attr({display: "none",}), 
        wrb = f.selectAll("path[class='st1']").attr({display: "inline", fill: "#FFFFFF"}), 
        wrc = f.selectAll("path[class='st2']").attr({"opacity": 0.75}), 
        wrd = f.selectAll("path[class='st3']").attr({fill: "#63B1C0"}), 
        wre = f.selectAll("path[class='st4']").attr({"opacity": 0, fill: "#63B1C0"}), 
        wrf = f.selectAll("path[class='st5']").attr({fill: "#C97F4C"}), 
        wrg = f.selectAll("path[class='st6']").attr({fill: "#B25415"}), 
        wrh = f.selectAll("path[class='st7']").attr({fill: "#C87D4B"}), 
        wri = f.selectAll("path[class='st8']").attr({"opacity": 0, fill: "#C97F4C"}), 
        wrj = f.selectAll("path[class='st9']").attr({fill: "#8CB533"}), 
        wrk = f.selectAll("path[class='st10']").attr({"opacity": 0, fill: "#8CB533"}), 
        wrl = f.selectAll("path[class='st11']").attr({fill: "#EEA135"}), 
        wrm = f.selectAll("path[class='st12']").attr({"opacity": 0, fill: "#EEA135"}), 
        wrn = f.selectAll("path[class='st13']").attr({fill: "#6D7CBC"}), 
        wro = f.selectAll("path[class='st14']").attr({fill: "#323E96"}), 
        wrp = f.selectAll("path[class='st15']").attr({fill: "#333B97"}), 
        wrq = f.selectAll("path[class='st16']").attr({"opacity": 0, fill:"#6D7CBC"}), 
        wrr = f.selectAll("path[class='st17']").attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 0.2709}), 
        wrs = f.selectAll("path[class='st18']").attr({fill: "none", stroke: "#000000", strokeWidth: 0.4}); 

       s.append(g); 
       s.append(wrb); 
       s.append(wra); 
       s.append(wrc); 

       var veryCold = s.group(wrn, wro, wrp, wrq); 
       veryCold.mouseover(function() { 
        this.animate({ 
         fill: "#ff0000" 
         }, 600); 
        }).mouseout(function() { 
        this.animate({ 
         fill: "#bada55" 
         }, 200); 

       var mixedHumid = s.group(wrj, wrk); 
       var hotHumid = s.group(wrl, wrm); 
       var hotDry = s.group(wrf, wrg, wrh, wri); 
       var marine = s.group(wrd, wre); 

       s.append(wrr); 
       s.append(wrs); 
      }); 
     </script> 
     </body> 
</html>

来源

2016-07-22 cjoyner

veryCold.mouseover(function() { 
    this.animate({ 
     fill: "#ff0000" 
    }, 600); 
}).mouseout(function() { 
    this.animate({ 
     fill: "#bada55" 
    }, 200); 
}); // <--- It looks like you're missing this line

从你分享的内容，它看起来像你的代码的格式不正确。

来源

2016-07-22 19:51:05

谢谢安德鲁，我肯定错过了那些关闭元素，但这似乎并没有让动画工作。我添加了拖动功能.drag（）;它似乎工作。我是否错误地写了动画功能？我有4个变量，我创建了不同的颜色（wrn，wro，wrp，wrq）。然后，我将这4个变量（分成一个名为veryCold的组）分组，并试图在组（非常酷）悬停时让它们全部变为相同的颜色。我希望这是有道理的。我非常感谢你的帮助。谢谢。 – cjoyner

如何使用Snap SVG创建鼠标悬停动画？

回答

相关问题