我目前正在尝试在新的流动站点上为现代浏览器使用svg文件而不是图像。这个想法是将SVG用作流体div上的背景图片,然后可以在悬停时对其进行更改,并且我们可以使用现代化工具(或类似工具)回退到不受支持的浏览器使用img背景。
从理论上讲,这很好,但是在某些浏览器(尤其是Firefox)上,svg的右边缘和下边缘在某些大小上具有一些奇怪的像素化,这对于img而言是不会发生的。
因此,如果您查看http://jsfiddle.net/deshg/xuq6812g/,则可以看到一个4 x 25%列的网格,每个列带有div或img(即100%宽度)。每个人都有一个带有svg或img背景的div或一个以svg / img为src的img元素。如果您在FF中查看此图片并将其放大/缩小,您会看到我所说的某种程度的退化。您还可以在下面的图片中看到这一点(蓝色圈出的区域是降级的位,您可以看到它们出现在svg而不是img上)。
任何人都无法阐明为什么会发生这种情况,以及如何防止这种情况发生,因为如果无法解决,这会使SVG在很大程度上无法使用
的CSS
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.container {
float: left;
width: 25%;
height: 100%;
}
.container img {
width: 100%;
}
.container div {
background-size: cover;
width: 100%;
padding-top: 100%;
}
的HTML
<div class="container">
BACKGROUND SVG:<br>
<div style="background-image: url('https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg');">
</div>
</div>
<div class="container">
BACKGROUND IMG:<br>
<div style="background-image: url('https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png');">
</div>
</div>
<div class="container">
SVG IN IMG TAG:<br>
<img src="https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg" alt="">
</div>
<div class="container">
IMG IN IMG TAG:<br>
<img src="https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png" alt="">
</div>
最佳答案
从多年来使用矢量图像开始,当您精确地对其进行裁切时,尽管它们需要走样,但裁切看起来很奇怪-在曲线处变平了。因此,圆圈,文本,徽标等在视图框中需要一些额外的边缘。在这里,我添加了更多内容,但是您明白了。
DEMO之前和之后:http://jsbin.com/buquw/1/edit
原始-精确裁切,但距离太近,因为此图像需要锯齿。
新版本-您不需要太多,用于夸大情况: