Html 如何在悬停时向SVG内的路径元素添加阴影

我试图在SVG内部的分组路径中应用一个阴影，就像css中的框阴影一样，尝试只应用一个类

框阴影：2px2px13px0var（rgba（0，0，0，0.3））悬停但不工作，还尝试了一个过滤器，类似于：

<filter id="dropshadow" x="-2" y="-2" width="300" height="300">
  <feGaussianBlur  stdDeviation="1"/>
</filter>

关于如何实现这一点有什么想法吗？这是你的电话号码

编辑：已经能够创建一个阴影，我可以使用以下方法显示：

<filter id="selective-shadow">
     <feColorMatrix type="matrix" values="0 0 0 0 0 
                                          0 0 0 0 0
                                          0 0 0 0 0 
                                          2 0 0 0 -1"/>
     <feGaussianBlur stdDeviation="3"/>
     <feOffset dy="0" dx="0"/>
     <feMerge>
       <feMergeNode/>
       <feMergeNode in="SourceGraphic"/>
     </feMerge>         
   </filter>

为了在悬停上创建阴影，我添加了一个由@Erik Dahlström开发的过滤器：

为了能够将代码放在代码段中，我只添加了几个状态


var svg=document.querySelector（“svg”）；
var path=document.querySelectorAll（“path.state”）；
var i=路径长度；
而(我--){
路径[i]。addEventListener（“鼠标悬停”，函数（e）{
appendChild（即target）；
});
}
.state{
填充物：白色；
笔划：道奇蓝；
变换原点：中心；
变换框：填充框；
过渡：1s；
}
：hover.state{
填充：蓝色；
笔画：白色；
笔画宽度：2px；
过滤器：url（#dropshadow）；
-webkit转换：比例（1.5）；
转换：比例（1.5）；
}

“ID”-爱达荷州
州首府-博伊西
人口——228790
“UT”-犹他州
州首府-盐湖城
人口
城市186440
估算（2018）200591
“AZ”-亚利桑那州
州首府凤凰城
人口
城市1445632
估算（2018）1660272
内华达州
州首府城市-卡森市
人口
城市55274
估算（2018）55414
“或”-俄勒冈州
州首府塞勒姆
人口
城市154637
估算（2018）173442
华盛顿特区
州首府奥林匹亚
人口
城市46478
估计（2018）52555
加利福尼亚州
州首府-萨克拉门托
人口
城市466488
估计（2018）508529
为什么在

伪元素之前使用

（根据新的CSS3约定应为
：：在
之前）？将你的过滤器应用到路径本身上（仅在
：hover
上）。它工作得很好，但我不明白为什么javascript代码也可以使用它，你能解释一下它的用途吗？谢谢@克里斯蒂安你好。svg中没有z索引。因此，JS用于在其他状态之上弹出所选状态。顺便说一句，JS似乎不适用于firefox，它不应用悬停effect@Cristian在Firefox中确实不起作用。“我会尝试修复它。”克里斯蒂安添加了第二个选项，它适用于所有现代浏览器，但不适用于JS
<filter id="selective-shadow">
     <feColorMatrix type="matrix" values="0 0 0 0 0 
                                          0 0 0 0 0
                                          0 0 0 0 0 
                                          2 0 0 0 -1"/>
     <feGaussianBlur stdDeviation="3"/>
     <feOffset dy="0" dx="0"/>
     <feMerge>
       <feMergeNode/>
       <feMergeNode in="SourceGraphic"/>
     </feMerge>         
   </filter>

path {
    fill: #e5e5e5;
}

path:hover {
    stroke: #f4f6f9;
    stroke-width:2px;
    stroke-linejoin: round;
    fill: #f4f6f9;
    cursor: pointer;
}

path:hover:before {
    content: "";
    filter: url('#selective-shadow');
}