html - 如何防止我的 SVG 图像出现 CSS 背景色 "bleed"？

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 不是很正方形，所以它不能完美地拉伸(stretch)到 32x32 像素，但有时我在所有四个边上都有边框，所以事情不会那么简单。 (实际上 SVG 文件有一个“0 0 195 195”的 View 框，并且似乎没有超出该范围的任何点。

值得注意的是，由于 SVG 的矢量性质，将尺寸更改为 39x39 像素(195 的完美除数)并没有解决问题，这不是我所期望的。

fiddle :http://jsfiddle.net/3wtazst8/1/

有什么建议吗？

谢谢

Answer 1

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

Icons with background colors showing issue and showing fix

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

Side-by-side image of icons within viewBox and extended beyond viewBox

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

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

修复您的 SVG，使背景超出 viewBox 将解决您的问题。