Css hover 有时不适用于 svg 路径

Posted 2023-03-06

【中文标题】Css hover 有时不适用于 svg 路径

【英文标题】：Css hover sometimes doesn't work on svg paths

【发布时间】：2013-07-11 01:46:36

【问题描述】：

我有一个带有路径的 svg，我有 css 悬停在它们上面，但悬停有时有效，有时无效。

可能是什么问题？

<div id="map_wrapper"> 
<svg   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- 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- 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- stroke="#000000" fill="none"/>
</g>
</svg>
</div>

和css

path
    fill:none;
    stroke:black;

path:hover
    fill:red;
    stroke:blue;

这是小提琴，只需快速将它们悬停即可。

http://jsfiddle.net/gWXbn/

【问题讨论】：

在 firefox、chrome、最新版本中测试过

【参考方案1】：

没有填充，因此默认情况下内部不会捕获鼠标事件，因此悬停不会对此做出反应。在这种情况下，将pointer-events 更改为 all 将解决此问题：

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

【讨论】：

如果您只想在笔划/可见时触发事件，请使用“pointer-events:stroke;”或“指针事件：可见；”。

在 2018 年救了我的命。编辑：“我是 SVG 子系统的同行（审阅者）”。这很整洁！

实际上，pointer-events 设置为 all 并不能解决问题，我对其进行了测试并成功重现了该问题。就像你说的，没有填充，所以即使指针事件设置为全部，悬停也不起作用。解决方法是设置背景色（白色）或透明的填充。然后，即使光标快速移动，您也不会有任何问题

对于多个开放（虚线）路径根本不起作用，因为将填充设置为透明将始终将事件路由到最上面的路径及其透明填充的内部。

取决于您的用例。如果你有问题，最好问一个新问题。确保包含minimal reproducible example

【参考方案2】：

以下解决了我的 svg 和 jQuery hover 等问题。

svg, svg * 
  pointer-events: none;

【参考方案3】：

当我使用对象标签时，这总是对我有用

object 
    pointer-events: none;