L
L
lingvo8382019-02-24 19:46:08
css
lingvo838, 2019-02-24 19:46:08

How to make hover on svg?

There is a bitmap with a floor plan. It has several apartments. On this bitmap, I drew vector areas that highlight the apartments. I saved it all in svg. Accordingly, I received a svg file with the required areas and a bitmap image in it. How to make these rendered hovers work when hovering over the desired apartment?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
Y
Yuri Esin, 2019-02-24
@lingvo838

In order for all js and css events to work on your vector canvas, you need to directly embed the full markup of your svg into the markup of your document (page). Then you can do whatever you want with it, as if it were any other DOM element. Access to child elements of type g or path will also be preserved with the same events. If you load your svg vector into the document like this or something like that, your events, of course, will not work, neither in css, nor in js. <img src="some.svg" alt="svg" />

V
Vladimir Proskurin, 2019-02-24
@Vlad_IT

The same :hover, but use fill instead of background, and stroke instead of border.

E
Egor Polyakov, 2019-08-12
@inmotusdesign

Check out the full example including :hover on the virtual keyboard primitive for pin code:
https://bundlespace.com/intro/lessons/lesson-desig...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question