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:

<svg version="1.1" class="flag_link_0" xmlns="http://www.w3.org/2000/svg"  mlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="190.323px" height="325.806px" viewBox="0 0 190.323 325.806" enable-background="new 0 0 190.323 325.806" xml:space="preserve">
    <polygon fill="#A71F20" stroke="#A71F20" stroke-width="3px" id="poly1" points="10.839,314.677 181.839,314.677 181.839,48.186 10.839,9.677 " />

CSS:

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