@lingvo838

Как сделать hover на svg?

Есть растровая картинка с планом этажа. На ней несколько квартир. На эту растровую картинку я нарисовал векторные области, которые выделяют квартиры. Сохранил в svg всё это. Соответственно получил svg файл с областями нужными и в нём растровую картинку. Как сделать чтобы эти отрисованные ховеры срабатывали при наведении на нужную квартиру?
  • Вопрос задан
  • 1244 просмотра
Решения вопроса 2
Exomode
@Exomode
Архитектор ПО
Для того, чтобы на вашем векторном канвасе работали все события js и css, вам нужно в разметку вашего документа (страницы) непосредственно внедрить полную разметку вашего svg. Далее вы можете с ним делать что угодно, словно это любой другой DOM-элемент. Доступ к дочерним элементам типа g или path так же сохранится с теми же событиями. Если вы подгрузите в документ свой вектор svg как <img src="some.svg" alt="svg" /> или в таком духе, ваши события, разумеется, не будут работать, ни в css, ни в js.
Ответ написан
dimovich85
@dimovich85 Куратор тега CSS
Уроки по JS - https://t.me/school_ofpery
SVG поддерживает добавление классов и id для элементов, и на них можно писать css. Правда свойства и значения свои, например fill, stroke...
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Тот же самый :hover, только вместо background используете fill, а вместо border - stroke.
Ответ написан
@inmotusdesign
Фронтенд-разработчик
Посмотрите полный пример, включая :hover, на примитиве виртуальной клавиатуры для пин-кода:
https://bundlespace.com/intro/lessons/lesson-desig...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы