[Solved] Fixed interactive overlay on SVG

[joepk]

Hi Guys,

I have an SVG that is a child of a div that animates when you hover it. When hovering over it an area should be highlighted. I thought putting another SVG over the bottom one with the same dimensions would be the easiest way. But it doesn’t work. What adds the difficulty I guess, is that it has to be responsive.

In this codepen. you see the map of a city. I commented the area which should become visible on hover.

Cheers, if you find a simple solution :)

[Paulie_D]

You’re using an actual image which doesn’t support that kind of interactivity of ‘parts’.

Why not use the actual SVG and then it would work when each sub-element of the SVG is hovered.

Each of those filled areas are separate paths/polygons …aren’t they?

[joepk]

Hey Paulie_D,

Got it fixed. Was rather simple. Just put the separates SVG’s on top with absolute position on the img tag. Then applied the same dimensions to make sure it would stay relative when the parent would scale.

Now I only need to animate the color of the area.

[Paulie_D]

Seems a little unnecessary when you could just use the SVG itself…but OK.

[joepk]

How would I do that?

[Ilan Firsov]

You’d have to separate each region to a separate shape/path, then you can use css hover state to change the fill color
For example:
http://codepen.io/ilanf/pen/gpRPEM

[Author]

Posts