1

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 rectangle be just like the vector what i draw.

http://jsfiddle.net/Ra4BF/

<svg version="1.1" class="flag_link_0" xmlns="http://www.w3.org/2000/svg" xmlns: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" points="10.839,314.677 181.839,314.677 181.839,48.186 10.839,9.677 "/>
</svg>

 $('.flag_link_0').hover(function(){
    console.log('in');
},function(){

});
  • What is the problem, the event is triggered, fiddle seems to be working ok. Are you trying to draw a curved shape? – pax162 Oct 27 '13 at 14:47
  • I am trying to find the way only hover the red area then trigger event ? if I use tag it is so hard to location area only use code, so I use illustrator drawing then export svg code like jsfiddle.. –  Oct 27 '13 at 14:53
  • Are you trying to run a function for an event other than hover, like clicking on the shape? – pax162 Oct 27 '13 at 14:56
  • ?? I am trying to make a shape not only rectangle can be hover, just like http://christianheilmann.com/2013/06/10/irregular-shape-rollovers-with-canvas-and-png/ but use svg not canvas –  Oct 27 '13 at 15:04
  • 2
    Select the polygon, not the SVG: `$('.flag_link_0 polygon').hover(...`. The SVG **is** a rectangle. – pete Oct 27 '13 at 15:09

1 Answers1

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;
}
Overflow Stack
  • 833
  • 5
  • 9