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

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

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

现在，您可以看到一个带有文本decise值的打开框。这是我想要的悬停效果。默认情况下，“所有”框处于关闭状态，但当我将鼠标悬停在每个框上时，我希望像“确定值”框一样打开每个框

开箱SVG代码如下：

---

不幸的是，我不知道如何做到这一点：

有很多很好的库用于此，但你必须付出一些努力来学习它们，真的。这个库被称为，另一个不是真正的库，它是一个插件来进一步简化库的使用，插件是。它使使用库制作SVG动画变得非常容易。他们的API非常简单和强大。我用它创造了汉堡下拉菜单在几分钟内来回变成十字的效果

将所有框绘制为关闭状态。 为每个包含方框的组指定一个class=box。为每个多边形指定一个适当的类top、left和right。 移动背景位于相关.box组内的组。 为组上的每个多边形定义CSS变换属性：将鼠标悬停在组上。 设置指针事件：针对.box组的所有事件。这样，鼠标指针一悬停在背景上就会触发悬停效果。 （可选）定义状态之间的转换。 .盒子{ 指针事件：全部； } .box>多边形{ 转换：转换0.3s； } .背景{ 不透明度：0.1； 填充：ff056a； } .盒子，上面{ 填充：ff4691； } .box:悬停。顶部{ 变换：translate0，-12px； } .盒子，对{ 填充：fc1874； } 盒子：悬停。对{ 转换：translate10.4px，6px； } .盒子，左边{ 填充：b81154； } .box:悬停。左{ 转换：translate-10.4px，6px； }

---

只是晚餐杜珀：哇，但是背景可以平滑地变亮，然后再变暗吗？我指的是浅色背景。更改悬停时的不透明度值：.box:hover.background{opacity:1；}。同样，定义一个转换是可能的。我明白了。谢谢你的大力帮助。

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