Question

我需要在鼠标悬停时为SVG设置动画。这个想法是多边形从中心散开，然后在鼠标移出时返回。我尝试使用 anime.js ，但是我对JavaScript一点都不满意。谢谢。

<svg width="283px" height="193px" viewBox="0 0 283 193" version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD" transform="translate(-299.000000, -582.000000)" stroke="#000000">
            <polygon id="poly" fill="#2D2D2D" points="550.65 660.48 551.13 661.88 550.93 660.56"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="403.29 705.56 379.49 741.63 405.79 774.14 433.63 774.14 433.63 767.04 410.8 761.88 403.94 743.97 433.63 716.21"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="566.62 753.83 574.52 755.04 581.46 718.01 573.07 703.08 551.37 702.44 528.94 719.14 562.83 719.46 564.6 723.66 557.99 732.61"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="551.13 661.88 550.93 660.56 540.77 591.5 504.98 582.55 466.9 617.73 466.57 619.09 558.54 684.86 558.87 684.36 551.39 662.63"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="529.42 774.14 562.63 774.14 562.63 767.68 537.13 760.26 531.38 741.41 496.83 733.18"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="453.36 718.6 455.03 650.1 376.54 655.09 406.3 703.27"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="485.01 718.78 492.75 728.51 529.99 737.39 524.34 718.89 548.06 700.5 556.31 688.19 522.22 663.81"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="565.17 664.19 574.2 648.38 566.62 636.28 566.94 625.47 559.68 614.34 562.42 608.04 545.26 594.5 555.14 661.63"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="481.13 717.36 518.96 661.48 465.56 623.29 459.16 649.83 459.04 649.84 457.34 719.64"></polygon>

            <polygon id="poly" fill="#2D2D2D" points="316.04 749.29 328.46 774.14 357.67 774.14 356.86 766.72 339.44 763.33 334.27 752.84 342.95 740.58 325.32 724.5"></polygon>

            <path id="path" fill="#2D2D2D" d="M343.79,690 L357.35,676.78 L344.44,712.92 L328.18,722.11 L347,739.31 L370.54,732.93 L401.66,703.44 L373,657 L359.93,667.26 C359.93,667.26 340.16,685.65 336.53,687.59 C332.9,689.53 319.83,692 319.83,692 L306.52,684.44 L306.93,669.9 L322.49,656.61 L314.26,654.43 L303.86,658.31 L300.47,685.41 L321.28,699.69 L343.79,690 Z"></path>
        </g>
    </g>
</svg>

Answer 1

实际上，这很简单。我不知道您是否要在javascript中使用它，但我是使用CSS做到这一点的粉丝：

    polygon:hover{
animation: animation 2s linear;
}

然后，您必须制作关键帧才能为多边形设置动画。

@keyframes animation{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(10deg);   
  }
}

您现在要做的就是为每个多边形赋予不同的ID，并使用不同的关键帧为其设置动画。我在上面显示的内容只是有关动画设置工作方式的一个示例，因此您可以根据自己的实际意愿来处理它。

如果还有其他问题，请随时提问！

在鼠标悬停时为SVG动画

1 个答案: