如何使用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創建鼠標懸停動畫？

回答

相關問題