Css hover đôi khi không hoạt động trên đường dẫn svg

Question

Tôi có một svg với đường dẫn, và tôi có css lơ lửng trên chúng, nhưng di chuột đôi khi làm việc, đôi khi không.

Điều gì có thể là vấn đề?

<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> 

và css

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

Đây là fiddle, chỉ cần di họ một cách nhanh chóng.

http://jsfiddle.net/gWXbn/

Answer 1

Không điền để nội thất không bắt sự kiện chuột theo mặc định và do đó di chuột không phản ứng với điều đó. Thay đổi pointer-events cho tất cả sẽ sửa chữa nó trong trường hợp này:

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

Answer 2

Sau đây là cố định vấn đề của tôi với svg và jQuery di chuột và như nhau.

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

Answer 3

này luôn luôn làm việc cho tôi khi sử dụng thẻ đối tượng

object { 
    pointer-events: none; 
}