大家好，我需要处理 svg 中的阴影
Hi guys, I need to deal with shadows in svg
这是哈萨克斯坦一个地区的地图我需要悬停时每个city/element出现阴影，如下图所示：
enter image description here
这里实际上是 SVG 代码本身：
CodePen linkhttps://codepen.io/sTenzo/pen/JjNbvLm
我尝试应用 CSS3 阴影属性，但它们不起作用。也许您需要在元素下创建相同的元素，但更大更暗，这已经通过“不透明度”和“悬停”进行管理，但我不知道该怎么做。我很乐意提供任何帮助。
您可以使用 filter: drop-shadow() css 属性（实际上起源于 SVG）。这是一个更新的代码笔，展示了它的实际应用（更改在第 20 行）：
https://codepen.io/maqam7/pen/KKmNBWj
请注意，您将 运行 以这种方式使用悬停的一个问题是 <svg> 的子元素不幸地不支持 z-index css 属性，因为这篇文章的一部分（所以你不能像使用 html 元素那样将 :hover 伪 class 设置为具有最高的 z-index ）。按原样，您将拥有一些形状，由于它们在 DOM.
中的顺序，它们的部分或全部阴影被邻居遮挡
参见：How to use z-index in svg elements?
要缓解此问题，您可能需要使用 Javascript 鼠标悬停事件将悬停的元素移动到节点列表的末尾。
[编辑]
无需使用Javascript解决分层问题的另一种方法是复制所有区域，确保副本在节点列表中的原始位置之后，并将副本设置为默认透明.
底层在“空闲”视觉状态下始终可见，悬停状态实际上是一个完全独立的形状，只有在悬停时才会出现。简单明了，但缺点是它会使您的 svg 标记加倍（从 ~92kb 到 ~184kb）。不过，这里有一个使用此解决方案的有效代码笔：
https://codepen.io/maqam7/pen/eYWBqEE
请注意，在这个更新的示例中，我在所有重复的 id 属性值后附加了 --interactive 以使它们独一无二且易于识别。显然，您可以随意更改这些值中的任何一个。这只是概念的工作证明。
[/edit]
这是哈萨克斯坦一个地区的地图我需要悬停时每个city/element出现阴影，如下图所示： enter image description here
这里实际上是 SVG 代码本身：
CodePen linkhttps://codepen.io/sTenzo/pen/JjNbvLm
我尝试应用 CSS3 阴影属性，但它们不起作用。也许您需要在元素下创建相同的元素，但更大更暗，这已经通过“不透明度”和“悬停”进行管理，但我不知道该怎么做。我很乐意提供任何帮助。
您可以使用 filter: drop-shadow() css 属性（实际上起源于 SVG）。这是一个更新的代码笔，展示了它的实际应用（更改在第 20 行）：
https://codepen.io/maqam7/pen/KKmNBWj
请注意，您将 运行 以这种方式使用悬停的一个问题是 <svg> 的子元素不幸地不支持 z-index css 属性，因为这篇文章的一部分（所以你不能像使用 html 元素那样将 :hover 伪 class 设置为具有最高的 z-index ）。按原样，您将拥有一些形状，由于它们在 DOM.
参见：How to use z-index in svg elements?
要缓解此问题，您可能需要使用 Javascript 鼠标悬停事件将悬停的元素移动到节点列表的末尾。
[编辑]
无需使用Javascript解决分层问题的另一种方法是复制所有区域，确保副本在节点列表中的原始位置之后，并将副本设置为默认透明.
底层在“空闲”视觉状态下始终可见，悬停状态实际上是一个完全独立的形状，只有在悬停时才会出现。简单明了，但缺点是它会使您的 svg 标记加倍（从 ~92kb 到 ~184kb）。不过，这里有一个使用此解决方案的有效代码笔：
https://codepen.io/maqam7/pen/eYWBqEE
请注意，在这个更新的示例中，我在所有重复的 id 属性值后附加了 --interactive 以使它们独一无二且易于识别。显然，您可以随意更改这些值中的任何一个。这只是概念的工作证明。
[/edit]