Question

我在我的网站上使用了svg图片。但是在所有浏览器上图像都变得模糊。有没有人知道为什么会发生这种情况？

这是html：

<div class="panel">
   <img id="logo" src="img/teste.svg" alt="">
</div>

（小组课程来自基金会）

这是css：

#logo {
position: absolute;
top: 0%;
height: 100%;
left: 1%;
width: 17%;
min-width: 219px;
min-height: 67px;
z-index: 1;}

我无法显示实际图像，但这里是svg文件的开头，不知道它是否相关：

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="722.964px"
 height="239.988px" viewBox="0 0 722.964 239.988" enable-background="new 0 0 722.964 239.988" xml:space="preserve">

Answer 1

这可能与缩放具有图像的元素有关。

我不确定你的情况是否相同，但是当我使用vw（视口宽度）来设置元素的大小时，我注意到模糊的svg css背景。显然，浏览器首先假设一些绝对值，然后根据提供的相对值（例如％或vw）进行校正。

无论如何，我通过这样做获得了更好的结果：

加倍宽度和高度值：width: 7.2vw;变为width: 14.4vw;
添加transform: scale(0.5);

看起来浏览器首先将svg渲染为像素大小的两倍（因此非常详细，但仍然模糊），然后当缩小一半大小时，结果是更清晰的图像。

Answer 2

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="722.964px"
 height="239.988px" viewBox="0 0 722.964 239.988" enable-background="new 0 0 722.964 239.988" xml:space="preserve">

您的身高设置为239.988px - 如果可以，请尝试将其舍入为完整像素。与宽度相同。浏览器往往会出现像素舍入问题，因此请尽量保持完整值。

Answer 3

在svg标签中添加preserveAspectRatio="none"

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="722.964px"
 height="239.988px" viewBox="0 0 722.964 239.988" preserveAspectRatio="none" enable-background="new 0 0 722.964 239.988" xml:space="preserve">

more about PreserveAspectRatioAttribute

svg图像在所有浏览器中都很模糊

3 个答案: