How to make hover on svg?

Question

css

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 1

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" />

Answer 2

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

Answer 3

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