Html 将阴影添加到SVG元素，例如线条

所以我对SVG很陌生，但我开始玩图形。这张图是从。我找了好几个小时，结果只找到了解决问题的一半办法。正如您从代码片段中看到的，如果您将鼠标悬停在图形上，它将“发光”。但我希望当我在上面悬停时，只有圆圈和“关节”会发光

我尝试的是：

使用常规CSS阴影

使用使图形“发光”的代码，但仅在g元素上

创建一个单独的SVG：a）在主SVG中b）单独创建，以及 将它们与

位置混合：绝对
。（在此之后是定位
（奇怪地工作）

我应该怎么做才能使圆和关节“发光”？

*{
框大小：边框框；
保证金：0；
填充：0；
}
html，正文{
身高：100%；
宽度：100%；
}
@导入url（'https://fonts.googleapis.com/css?family=Roboto+单声道：400500&display=swap'）；
身体{
字体系列：“Roboto Mono”，monospace；
}
.graph.labels.x标签{
文本锚定：中间；
}
.graph.labels.y-labels{
文本锚定：结束；
}
.图表{
高度：500px；
宽度：800px；
}
.graph.grid{
冲程：#ccc；
笔划数组：0；
笔画宽度：3；
}
.标签{
字号：17px；
字体大小：400；
}
.标签名称{
字号：500；
文本转换：大写；
字体大小：15px；
填充：黑色；
}
.数据{
填充：#f86d36；
笔画宽度：1；
}
.图形.点连接{
行程：#f86d36；
笔划数组：0；
笔画宽度：3；
}
svg：悬停{
-webkit过滤器：投影（0px 0px 4px#f86d36e8）；
过滤器：投影（0px 0px 4px#f86d36e8）；
}

20082009201020112012年
151050价格

我希望这就是您需要的：我正在为阴影使用svg过滤器。 我在代码中添加了

.data circle:hover{filter:url（#f）}

用于单个圆和

.dot关节。x-grid:hover{filter:url（#f）}

用于行组：

*{
框大小：边框框；
保证金：0；
填充：0；
}
html，正文{
身高：100%；
宽度：100%；
}
@导入url（'https://fonts.googleapis.com/css?family=Roboto+单声道：400500&display=swap'）；
身体{
字体系列：“Roboto Mono”，monospace；
}
.graph.labels.x标签{
文本锚定：中间；
}
.graph.labels.y-labels{
文本锚定：结束；
}
.图表{
高度：500px；
宽度：800px；
}
.graph.grid{
冲程：#ccc；
笔划数组：0；
笔画宽度：3；
}
.标签{
字号：17px；
字体大小：400；
}
.标签名称{
字号：500；
文本转换：大写；
字体大小：15px；
填充：黑色；
}
.数据{
填充：#f86d36；
笔画宽度：1；
}
.数据圈：悬停{filter:url（#f）}
.图形.点连接{
行程：#f86d36；
笔划数组：0；
笔画宽度：3；
}
.dot joints.x-grid:hover{filter:url（#f）}

20082009201020112012年
151050价格

这正是我需要的！你能再详细解释一下吗？我已经用解释更新了答案。请看一看