SVG 图像显示我无法移除的细边框答案

【问题标题】：SVG image shows a thin border that I cant removeSVG 图像显示我无法移除的细边框
【发布时间】：2020-10-07 13:20:49
【问题描述】：

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

我已尝试移除边框。

我已将 SVG 引用为图像标签中的外部文件

HTML 文件

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

SVG 文件

<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;
}

【问题讨论】：

标签： html css web svg vector

【解决方案1】：

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

您有以下修复：

选项 1：禁用边缘平滑

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

浏览器支持所有主流浏览器。

权衡：边缘变得锯齿状。

查看docs

选项 2：重叠图形

确保您的<rect> 与 html 元素重叠，这样平滑造成的间隙不可见。

例如，您可以为 svg 元素添加边框。

【讨论】：