Html 我如何防止CSS背景色；“流血”；围绕我的SVG图像？

我有一个SVG文件，通常显示为白色，当用户悬停在上面时显示为红色。这是通过具有图像的透明区域并使用以下CSS和HTML实现的：

a>img{background:#fff;width:32px;height:32px}
a:hover>img{background:#900}

<a href="blah.html"><img src="blah.svg"></a>

a>img{背景：#fff；宽度：32px；高度：32px}
a:悬停>img{背景：#900}

问题是，我偶尔会在图像周围获得非常薄的白色（或红色）边框。不同的浏览器/缩放级别/设备显示不同的边框-有时没有，有时有些，有时全部

这似乎表明SVG文件并没有完全“填充”img标记

我可能会认为问题在于SVG不是很正方形，所以它不能完美地延伸到32x32像素，但有时我会在所有四个边上都有边框，所以它不会那么简单。（事实上，SVG文件的viewbox为“0 195 195”，并且没有超出该范围的任何点

值得注意的是，由于SVG的矢量特性，将尺寸更改为39x39像素（一个195的完美除数）并不能解决问题，而不是我所期望的

小提琴：

有什么建议吗

---

谢谢

我知道这已经超过一年了，但我也遇到了同样的问题，并考虑了Paul LeBeau关于扩展到viewBox之外的建议。下面是一个显示问题和修复的示例

徽章图标不显示出血，而奖牌图标显示出血

在Illustrator中查看左侧SVG时，图像的背景会转到viewBox的最边缘

在Illustrator中查看右侧SVG时，图像的背景超出了viewBox的边缘

---

修复SVG，使背景延伸到viewBox之外，将解决您的问题。

因此，SVG类似于一个有孔的正方形？正方形的尺寸是否为195x195？如果您创建了一个演示，以便我们自己看到问题，可能会有所帮助。正确。在桌面Chrome中看起来很好，但在IE9或mobile C中则不会您可以尝试扩展外部“矩形”，使其扩展到viewBox之外。这可能会避免某些浏览器上可能出现的任何舍入问题。