CSS – Radial menu problem with clickable areas

[babilkuyusu]

Hi, people.

I have a very unique problem I guees and can’t find the solution. I’m preparing a svg graphic for World Cup 2014 Tournament. It’s a huge, stadium shaped radial menu.

Every menu items in this radial menu is a ‘svg group’ and each group contains an ‘image’ and ‘path’ elements.

So the problem is that the clickable area of the ‘image element’ in the menu buttons overflow the clickable area of the button. That is why the hover actions over the buttons placed at the corners doesn’t works correctly.

You can see and inspect the overflows of ‘image’ elements by using ‘firebug’ very easly.

Here is a sample of my menu and hope there is someone who can help me.

http://afiliyemek.com/wc/

[Paulie_D]

Seems to me that an image there is a little unnecessary…can’t the whole thing be in SVG but I freely confess I’m no expert.

You have a shipload of unique images you are serving up. Surely there must be another way.

http://codepen.io/Paulie-D/pen/rIcwL

[babilkuyusu]

I try not to make them image but then other problems appears :)

[Paulie_D]

Well unless you can stop the image overflowing I don’t see much you can do.

Frankly, you’re using most of those images for text so I see no reason not to use a text element in the SVG itself.

If you do that, your image would only be the ‘flags’ which are much smaller.

However, I’ll leave this to the SVG experts.

[Author]

Posts