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

Question

[lingvo838]

Есть растровая картинка с планом этажа. На ней несколько квартир. На эту растровую картинку я нарисовал векторные области, которые выделяют квартиры. Сохранил в svg всё это. Соответственно получил svg файл с областями нужными и в нём растровую картинку. Как сделать чтобы эти отрисованные ховеры срабатывали при наведении на нужную квартиру?

Answer 1

[Юрий Есин]

Для того, чтобы на вашем векторном канвасе работали все события js и css, вам нужно в разметку вашего документа (страницы) непосредственно внедрить полную разметку вашего svg. Далее вы можете с ним делать что угодно, словно это любой другой DOM-элемент. Доступ к дочерним элементам типа g или path так же сохранится с теми же событиями. Если вы подгрузите в документ свой вектор svg как <img src="some.svg" alt="svg" /> или в таком духе, ваши события, разумеется, не будут работать, ни в css, ни в js.

Answer 2

[Dima Polos]

SVG поддерживает добавление классов и id для элементов, и на них можно писать css. Правда свойства и значения свои, например fill, stroke...

Comments

[Dima Polos]

Да, важный момент подметили, надо инлайнить svg, чтобы работали события и селекторы, так как svg инлайн становится частью DOM.

Answer 3

[Владимир Проскурин]

Тот же самый :hover, только вместо background используете fill, а вместо border - stroke.

Answer 4

[Егор Поляков]

Посмотрите полный пример, включая :hover, на примитиве виртуальной клавиатуры для пин-кода:
https://bundlespace.com/intro/lessons/lesson-desig...