javascript - 如何将鼠标悬停在 SVG 元素上并更改多边形元素？

Question

我使用 SVG 制作了这张图片。这是 fiddle :

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

现在您可以看到一个打开的框，其中包含文本 Decide Value。这就是我想要的悬停效果。默认情况下，所有框都是关闭的，但是当我将鼠标悬停在它上面时，我想打开每个框，例如 Decide Value 框。

开箱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. 定义一个 CSS transform :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>