Как навести курсор на элемент SVG и изменить элемент многоугольника?

Я сделал это изображение с помощью 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>

К сожалению, понятия не имею, как это сделать :(

javascript html css svg

09.09.2018 07:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

380

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

09.09.2018 08:13

Ответ принят как подходящий

Нарисуйте все коробки закрытыми.
Дайте каждой группе, содержащей коробки, class = "box". Дайте каждому многоугольнику соответствующий класс top, left и right.
Переместите группу с фоном внутрь связанной группы .box.
Определите свойство CSS transform для каждого многоугольника на :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>

Just Supper Dupper :) Вау, но может ли этот фон быть ярким, плавным и снова стать менее ярким? Я имею в виду светлый цвет фона пинга.

— 09.09.2018 17:05

Измените значение непрозрачности при наведении: .box:hover .background { opacity: 1; }. Опять же, определение перехода возможно.

— 09.09.2018 17:08

Понятно. Спасибо за вашу огромную помощь.

— 09.09.2018 17:11

09.09.2018 17:03