如何防止SVG图像周围的CSS背景颜色“渗出”？

Question

我有一个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>

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

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

我可能会认为问题在于SVG不太方形，因此无法完美地拉伸到32x32像素，但是有时我在所有四个侧面上都形成边框，所以不可能那么简单。 （实际上，SVG文件的视图框为“ 0 0 195 195”，并且似乎没有超出该范围的任何点。

值得注意的是，由于SVG的向量性质，将尺寸更改为39x39像素（195的完美除数）不能解决问题，并非我期望的那样。

小提琴： http : //jsfiddle.net/3wtazst8/1/

有什么建议么？

谢谢

Answer 1

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

具有背景颜色的图标显示问题并显示修复

徽章图标不显示出血，而勋章图标显示。

viewBox中图标的并排图像，并扩展到viewBox之外

在Illustrator中查看左SVG，图像的背景将移到viewBox的最边缘。

在Illustrator中查看正确的SVG，图像的背景超出了viewBox的边缘。

修复SVG，使背景超出viewBox的范围，即可解决您的问题。