我目前正在尝试在新的流动站点上为现代浏览器使用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

原始-精确裁切,但距离太近,因为此图像需要锯齿。


新版本-您不需要太多,用于夸大情况:

10-05 21:00
查看更多