How to make area be irregular shape not rectangle?

Question

How to make area be irregular shape not rectangle? I used svg code like below, tried to make a map but I just can\'t get it how to make mouse over or click the area not rectangl

Answer 1

You can use pure CSS to achieve the results you are looking for. Add an id/class to your svg, in this case I added an id of poly1.

Here is your svg modified JSFiddle: >>>CLICK HERE<<<

SVG:

CSS:

#poly1:hover {
    fill: #ccc;
    stroke: #A71F20;
    stroke-width: 3px;
}