Question

.banner{
  width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: content-box;
    margin: 0;
    height: 486px;
    padding: 0;
}
.banner img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}
span.img {
    background-image:url(https://cdn.aqeed.com/assets/images/qeedo/qeedofamily.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    position: absolute;
    height: 78%;
    width: 21%;
    left: auto;
    right: 12%;
    bottom: 0;
}

<html>
<head>
</head>
<body>
<div class="banner banner-product aq-container">
        <img src="https://cdn.aqeed.com/assets/images/banners/medicalbanner.svg" alt="Request Quote">
            <span style="background-image:url(https://cdn.aqeed.com/assets/images/qeedo/qeedofamily.svg)" class="img"></span>
    </div>
</body>

</html>

我在网站上使用了很多SVG图片，但是最近有些图片在svg的顶部边缘上出现了奇怪的线，而有些图片中的这行仅显示在小尺寸上（移动版），我要求设计师提供一个新的svg，但很明显，如浏览器的源代码面板所示，该svg本身很清晰。这在所有浏览器上都在发生。下面是svg边缘的屏幕截图，这些行显示在黄色标记下方：

这是手机上的第二个：

Answer 1

我无法确定您的第一个缩略图指示的是图像的哪一部分。但是第二张图像对应于医院的顶部。

医院实际上不是适当的媒介，它是嵌入为<pattern>的PNG文件。我怀疑造成杂散线的原因可能只是将大对象（1092x790图案和图像）缩小到非常小的尺寸（在移动设备上）时发生的一些舍入问题。您看到的线条可能是医院图像的底部，因为它在<pattern>中垂直重复。

SVG中实际上有两个图像模式。第二个是大灰色的PNG，用于底部的道路。

我的建议是请您的设计师从SVG中删除两个PNG图像，然后将其重新绘制为矢量。我非常有信心摆脱您的困扰。

作为奖励，它也将大大缩小您的SVG。那两个PNG图片占用了137k SVG文件中的72k。如果将这些图像更改为矢量图像，则文件大小几乎可以减少一半。

SVG背景图片顶部有奇怪的线条

1 个答案: