这是一张来自哈萨克斯坦的一个地区的地图，悬停时，每个城市/元素都会出现阴影，如图所示：在此处输入图像描述
这实际上是SVG代码本身：CodePen linkhttps://codepen.io/sTenzo/pen/JjNbvLm
我尝试应用CSS3阴影属性，但它们不起作用。也许你需要在元素下创建相同的元素，但稍微大一点、暗一点，这已经用"；不透明性"；以及"；"悬停"；，但我不知道该怎么做。如果有人帮忙，我会很高兴的。
您可以使用filter: drop-shadow()css属性(它实际上起源于SVG(。这是一个更新的代码笔，显示了它的作用(更改在第20行(：
https://codepen.io/maqam7/pen/KKmNBWj
请注意，以这种方式使用hover会遇到一个问题，即不幸的是，截至本文撰写之时，<svg>的子元素不支持z-indexcss属性(因此，您不能像使用html元素那样将:hover伪类设置为具有最高的z-index(。照原样，由于某些形状在DOM中的顺序，它们的部分或全部阴影会被邻居遮挡。
请参阅：如何在svg元素中使用z-index？
为了缓解这个问题，您可能需要使用Javascript鼠标悬停事件将悬停的元素移动到节点列表的末尾。
[编辑]
在不必使用Javascript的情况下解决分层问题的另一种方法是复制所有区域，确保副本在节点列表中的原始区域之后，并在默认情况下将副本设置为透明。
底层总是可见的；空闲"；视觉状态，而悬停状态实际上是一个完全独立的形状，只有在悬停时才会出现。简单明了，但缺点是它会使svg标记翻倍(从92kb增加到184kb(。尽管如此，这里有一个使用此解决方案的代码笔：
https://codepen.io/maqam7/pen/eYWBqEE
注意，在这个更新的示例中，我用--interactive附加了所有重复的id属性值，以使它们唯一且易于识别。显然，你可以随意改变这些价值观。这只是一个有效的概念证明。
[/edit]