web-dev-qa-db-fra.com

Le survol CSS ne fonctionne parfois pas sur les chemins SVG

J'ai obtenu un svg avec des chemins, et j'ai le survol de CSS sur eux, mais survole parfois le travail, parfois non.

Quel peut être le problème?

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

et css

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

Voici le violon, survolez-les rapidement.

http://jsfiddle.net/gWXbn/

htmlcsssvg
31
ArmeniaH

Il n'y a pas de remplissage, donc l'intérieur n'attrape pas les événements de souris par défaut et donc le survol ne réagit pas à cela. Changer pointer-events en all résoudra le problème dans ce cas:

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

Ce qui suit a résolu mon problème avec svg et jQuery en vol stationnaire et similaire.

svg, svg * {
  pointer-events: none;
}
4
Markus Bucher

Cela fonctionne toujours pour moi lorsque j'utilise une balise d'objet

object {
    pointer-events: none;
}
0
judehall