L'hover del Css a volte non funziona sui percorsi svg

Question

Ho ottenuto uno svg con percorsi e ho il css al passaggio del mouse su di essi, ma a volte il hover funziona, a volte no.

Quale può essere il problema?

<div id="map_wrapper"> 
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> 
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> 
<g> 
<title>Layer 1</title> 
<path id="svg_3" d="m200,114l-114,95l26,97l99,20c0,0 19,-67 19,-68c0,-1 -1,-5 4,-8c5,-3 39,-10 40,-10c1,0 13,-2 14,-9c1,-7 -4,-36 -8,-40c-4,-4 -23,-15 -27,-17c-4,-2 -24,-16 -24,-23c0,-7 -1,-15 -1,-21c0,-6 -6,-19 -7,-19c-1,0 -21,3 -21,3z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> 
<path id="svg_4" d="m244,101c0,0 14,55 16,56c2,1 22,11 24,13c2,2 23,17 24,18c1,1 1,28 -1,31c-2,3 -3,25 -9,30c-6,5 -32,14 -35,14c-3,0 -8,5 -10,8c-2,3 -10,37 -10,37c0,0 7,10 16,15c9,5 53,12 59,12c6,0 30,0 40,-8c10,-8 34,-7 35,-31c1,-24 1,-48 1,-65c0,-17 -13,-61 -15,-66c-2,-5 -21,-21 -21,-23c0,-2 34,-20 44,-15c10,5 29,24 33,28c4,4 10,20 16,5c6,-15 28,-31 -1,-46c-29,-15 -25,-24 -55,-25c-30,-1 -42,-5 -53,-5c-11,0 -46,-2 -52,1c-6,3 -46,16 -46,16z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> 
<path id="svg_5" d="m428,180c0,0 -3,52 -4,53c-1,1 -2,27 -2,31c0,4 -8,29 -11,34c-3,5 -15,36 -21,38c-6,2 -77,18 -81,18c-4,0 -68,0 -68,7c0,7 -1,18 8,23c9,5 23,9 45,14c22,5 97,12 111,6c14,-6 44,-20 55,-30c11,-10 28,-28 37,-42c9,-14 14,-15 23,-40c9,-25 16,-109 12,-114c-4,-5 -32,-12 -45,-9c-13,3 -59,11 -59,11z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> 
</g> 
</svg> 
</div> 

e css

path{ 
    fill:none; 
    stroke:black; 
} 
path:hover{ 
    fill:red; 
    stroke:blue; 
} 

Ecco il violino, è sufficiente posizionare rapidamente.

http://jsfiddle.net/gWXbn/

Answer 1

Non c'è riempimento così l'interno non intercetta gli eventi del mouse di default e quindi hover non reagisce a questo. Cambiare pointer-events a tutti lo risolverà in questo caso:

path{ 
    fill:none; 
    stroke:black; 
    pointer-events:all; 
} 

Answer 2

I seguenti fissa il mio problema con SVG e jQuery hover e simili.

svg, svg * { 
    pointer-events: none; 
} 

Answer 3

questo funziona sempre per me quando si utilizzano tag object

object { 
    pointer-events: none; 
}