如何在SVG元素上悬停并改变多边形元素？

Question

我用SVG制作了这个图像。这是小提琴：

https://jsfiddle.net/9y723z5c/1/

现在，您可以看到一个打开的框，其文本为决定值。这就是我想要的悬停效果。默认情况下，所有框都已关闭，但当我悬停在每个框上时，我希望像决定值框那样打开它。

打开框SVG代码如下：

<g id="Group-10">
    <text x="400" y="200" fill="red" style="font-size : 20px; width : 500px;">Decide Value</text>
    <polygon id="Stroke-14" fill="#FF4691" points="472.301332 231.804779 501.852722 214.74142 531.404111 231.803671 501.857151 248.86703"></polygon>
    <polygon id="Stroke-15" fill="#FC1874" points="543.406769 243.803228 543.406769 277.926624 513.854272 294.988875 513.855379 260.866587"></polygon>
    <polygon id="Stroke-16" fill="#B81154" points="472.299671 255.803228 472.359465 289.998598 501.85549 306.99109 501.85549 272.867694"></polygon>
</g>

不幸的是，我不知道该怎么做

Answer 1

1. 把所有的盒子画成封闭的。
2. 给每个包含这些框的组一个class="box"。给每个多边形一个适当的类top、left和right。
3. 将具有背景的组移动到相关的.box组中。
4. 为组中的transform上的:hover上的每个多边形定义CSS :hover属性。
5. 为pointer-events: all组设置.box。这样，当指针越过背景时，就会触发悬停效果。
6. 或者，在状态之间定义一个transition。

​

.box {
    pointer-events: all;
}
.box > polygon {
    transition: transform 0.3s;
}
.background {
    opacity: 0.1;
    fill: #ff056a;
}
.box .top {
    fill: #ff4691;
}
.box:hover .top {
    transform: translate(0, -12px);
}
.box .right {
    fill: #fc1874;
}
.box:hover .right {
    transform: translate(10.4px, 6px);
}
.box .left {
    fill: #b81154;
}
.box:hover .left {
    transform: translate(-10.4px, 6px);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" height="150px" width="150px">
  <g class="box">
    <g class="background">
      <polygon points="105.233,43.9505 60.2853,18 15.3382,43.9505 15.3382,95.8503 60.2853,121.801 105.233,95.8503" />
      <polygon points="120.027,35.4088 60.2853,0.916406 0.543312,35.4088 0.543312,104.392 60.2853,138.884 120.027,104.392" />
    </g>
    <polygon class="top" points="89.838,52.836 60.286,69.9 30.73,52.838 60.282,35.774" />
    <polygon class="right" points="60.285,104.022 60.286,69.9 89.838,52.836 89.838,86.96" />
    <polygon class="left" points="30.79,87.031 30.73,52.838 60.286,69.9 60.285,104.022" />
  </g>
</svg>

​

Answer 2

这里有很多很好的库，但是你必须努力学习它们(只是一点点，真的)。这个库叫做Snap.svg，另一个不是真正的库，它是一个插件，可以进一步简化库的使用，插件是快速动画-状态。它使得用动画化SVG的变得非常容易。他们的API非常简单和强大。我用它创造了下垂式汉堡菜单的效果，在几分钟内就变成了交叉。