Html SVG将阴影放置在：悬停上

我想知道是否有可能在SVG元素上有一个dropshadow，但只有当它是：hover时才会出现。（我为SVG使用了filter标记，这就是我想要的效果）。我读到内联：hover是不可能的，所以我想知道是否有其他方法可以做到这一点。如果是这样，我将如何在我的#sun上实现它

svg{
边框：3倍纯红；
}
正文{
字体系列：“Unica One”，草书；
字体大小：25px；
}
太阳{
填充：#D8A089；
}
a:悬停#太阳{
填充：#FBA618；
}
a:悬停#海鸥{
不透明度：.8；
}
R
C

当您悬停时，只需应用过滤器即可

svg{
边框：3倍纯红；
}
正文{
字体系列：“Unica One”，草书；
字体大小：25px；
}
太阳{
填充：#D8A089；
}
a:悬停#太阳{
填充：#FBA618；
过滤器：url（#poly）；
}
a:悬停#海鸥{
不透明度：.8；
}
R
C