使用外部SVG作为SRC的<IMG>上的CSS背景颜色

Question

我有一个SVG正方形,中间有一个形状切口(想想饼干切割器).SVG是在Illustrator中创建的,形状的边缘延伸到艺术板的边缘.

形状的颜色与背景颜色相同.

要改变SVG形状的颜色,我只是简单地改变CSS中IMG的背景颜色.这样可以正常工作,但是您会注意到形状外部有一个半像素颜色,就好像它是一个边框.

根据IMG指定的大小,边框消失或重新出现.关于如何摆脱这一点的任何线索？

工作示例:http: //jsfiddle.net/ja6Tx/

HTML:

<div class="container">

     <img class="logo" src="http://toobulo.com/img/logo-icon.svg" />

 </div>

CSS:

 body {background:#252525;}

 img.logo {background:yellow;}

更新: 我决定以更简单的形式复制问题,以排除任何像素小数问题,问题仍然存在.(在任何屏幕上).

见这里:http: //jsfiddle.net/w7vrs/

我们现在有一个320x240的矩形.请注意,如果容器的宽度是相同宽高比(160,640等),则问题永远不会发生.一旦将.img-container的宽度更改为451px,问题就会返回.

所有这一切的要点是SVG意味着可扩展,因此我不必指定精确的像素宽度以利用SVG.

如您所见,新SVG的代码几乎没有:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="240px" viewBox="0 0 320 240" style="enable-background:new 0 0 320 240;" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .st0{fill:#020202;}
]]>
</style>
<rect class="st0" width="320" height="240"/>
</svg>

Answer 1

这是一个奇怪的错误，可能与内联元素周围的填充有关。这是我发现可以处理它的方法。将您的 svn 放入“图像容器”div 中，如下所示：

<div class = 'img-container'>
    <img class="logo" src="http://toobulo.com/img/logo-icon.svg" />
</div>

然后将图像宽度设置为 100%，并将容器上的宽度设置为您实际想要的宽度：

.img-container {
    width: 200px;
}

img.logo {background:yellow;
    width:100%;
}

工作小提琴：http://jsfiddle.net/ja6Tx/5/