html - 在 SVG 图像悬停上添加阴影

Question

我有一个保存为 SVG 的透明 Twitter 图标。一旦我将它添加为 img 标签并将其包装在链接标签中，如下所示:

<a href="#"><img src="http://imgh.us/twitter_25.svg" width="300"></a>

我想给它一个悬停效果:盒子阴影:10px 10px 5px #888888;

但是，问题是图像显示为白色背景，悬停效果也应用于白色背景区域。

a:hover {
  box-shadow: 10px 10px 5px #888888;
}

<a href="#">
  <img src="http://imgh.us/twitter_25.svg" width="300">
</a>

Answer 1

也许是这样？

a img {
        border-radius: 50%;
        display: block;
        border: none;
}

a:hover img{
  box-shadow: 10px 10px 5px #888888;
}

<a href="#"><img src="http://imgh.us/twitter_25.svg" width="300"></a>