Как навести курсор на элемент 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. Определите свойство 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>

Answer 2

Для этого есть очень хорошие библиотеки, но вам придется приложить некоторые усилия для их изучения (правда, немного). Библиотека называется Snap.svg , другая на самом деле не библиотека, это плагин для дальнейшего облегчения использования библиотеки, плагин snap-animation-states, Это делает анимацию SVG с библиотекой чрезвычайно простой. Их API действительно простой и мощный. Я использовал его, чтобы создать эффект выпадающего меню-гамбургера, превращающегося в крест-накрест за считанные минуты.