Wie erstelle ich eine Mouseover-Animation mit Snap SVG?

Ich erstelle eine Hover-Map-Animation mit Snap.svg, aber ich habe Probleme mit dem Animationsteil. Die Karte wurde in Illustrator erstellt und als SVG-Datei exportiert und ist mit einer HTML-Seite verknüpft.Wie erstelle ich eine Mouseover-Animation mit Snap SVG?

Sobald ich den folgenden Code hinzufügen, verschwindet alles.

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

Ich bin neu bei Stack Overflow, bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen. Jede Hilfe, die Sie zur Verfügung stellen können, wird sehr geschätzt. Vielen Dank!

<!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>

Quelle

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

Von dem, was Sie geteilt haben es Code wie folgt aussieht nicht richtig formatiert ist.

Quelle

2016-07-22 19:51:05

Danke Andrew, Ich habe definitiv diese schließenden Elemente vermisst, aber das schien nicht die Animation zu funktionieren. Ich habe die Drag-Funktion .drag() hinzugefügt; und es schien zu funktionieren. Schreibe ich die Animate-Funktion falsch? Ich habe 4 Variablen, die ich erstellt habe, die verschiedene Farben haben (wrn, wro, wrp, wrq). Ich gruppierte dann diese 4 Variablen (in eine Gruppe mit dem Namen veryCold) und versuche, sie alle in die gleiche Farbe zu bringen, wenn die Gruppe (veryCold) schwebt. Ich hoffe, das macht Sinn. Ich schätze deine Hilfe sehr. Vielen Dank. – cjoyner

Wie erstelle ich eine Mouseover-Animation mit Snap SVG?

Antwort

Verwandte Themen