Html SVG图像显示了我无法删除的薄边框

我的HTML页面上有一个SVG图像，它周围显示了一个非常薄的边框（在底部显示为一条水平线）

我已试图消除边界

我在图像标记中将SVG作为外部文件引用

HTML文件

---

这是由于浏览器中的svg渲染器试图平滑svg图像造成的

您有以下修复程序：

选项1：禁用边缘平滑 所有主要浏览器都支持浏览器

权衡：边缘变得参差不齐

查看

---

选项2：重叠图形 确保您的

与html元素重叠，这样平滑造成的间隙就不可见了

例如，可以向svg元素添加边框

<img class="svgfix" src="img/home_footer_header.svg" alt="" width="100%" />

<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="237.239" viewBox="0 0 1920 237.239">
    <g id="HomeFooter_Seperater" transform="translate(0 -1767.761)">
        <rect id="Rectangle_610" 
            data-name="Rectangle 610" 
            width="1920" 
            height="122" 
            transform="translate(0 1883)" 
            style="fill:rgb(58,58,58)"
            fill="#3a3a3a" />
        <path id="Seperator_Black" d="M-2652,3221.992l1920-86.4v141.95l-1920,85.376Z" transform="translate(2652 -1367.826)"/>
    </g>
</svg>

img.svgfix {
    border: 0;
    background-clip: padding-box;
    color: transparent;
}

img.svgfix rect {
    shape-renderer: crispEdges;
}