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

【问题标题】：How do I create a mouseover animation using Snap SVG?如何使用 Snap SVG 创建鼠标悬停动画？
【发布时间】：2016-07-22 19:35:54
【问题描述】：

我正在使用Snap.svg 创建悬停地图动画，但动画部分似乎有问题。该地图在Illustrator 中创建并导出为SVG 文件并链接到HTML 页面。

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

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>

【问题讨论】：

标签： svg snap.svg

【解决方案1】：

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

从您分享的内容看来，您的代码格式不正确。

【讨论】：

谢谢 Andrew，我肯定错过了那些结束元素，但这似乎并没有让动画工作。我添加了拖动功能 .drag();它似乎奏效了。我是否错误地编写了动画功能？我创建了 4 个具有不同颜色的变量（wrn、wro、wrp、wrq）。然后我将这 4 个变量分组（到一个名为veryCold 的组中），并试图在组（veryCold）悬停时让它们全部变为相同的颜色。我希望这是有道理的。我真的很感谢你的帮助。谢谢。