Question

我已经使用SVG制作了这张图片。这是小提琴：

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

将所有框绘制为封闭状态。
给每个包含框的组class="box"。给每个多边形一个适当的类top，left和right。
将具有背景的组移动到相关的.box组中。
为组上transform上的每个多边形定义CSS :hover属性。
为pointer-events: all组设置.box。这样，只要指针悬停在后台，就会触发悬停效果。
（可选）在状态之间定义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，另一个库并不是真正的库，它是一个可进一步简化该库使用的插件，该插件为snap-animation-states。使用该库对SVG 进行动画制作非常容易。他们的API非常简单而强大。我用它来创建下拉菜单-汉堡菜单在几分钟之内即可来回交叉的效果。

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

2 个答案: