css SVG图像显示了一个我无法删除的细边框

7tofc5zh  于 2023-05-02  发布在  其他
关注(0)|答案(3)|浏览(279)

我有一个SVG图像在我的HTML页面和它显示了一个非常薄的边界周围(可见作为一个水平线的底部)。
我试图消除边界。
我在图像标记中引用了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;
}

kknvjkwl

kknvjkwl1#

这是由于浏览器中的svg渲染器试图平滑你的svg图像造成的。
您有以下修复:

选项一:禁用边缘平滑

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

浏览器支持所有主流浏览器。
权衡:边缘变得锯齿状。
查看docs

选项二:重叠图形

确保<rect>与html元素重叠,这样平滑处理造成差距就看不见了。
例如,您可以为svg元素添加边框。

xsuvu9jc

xsuvu9jc2#

我所做的是改变svg的填充颜色以匹配其背景的颜色。一旦我这样做了,这些行就从svg中删除了。

q3qa4bjr

q3qa4bjr3#

我发现在src标签中使用SVG:

<img src="yoursvg.svg"></svg>

它会在你的svg周围放一个边框,如果你使用了SVG标签,它应该被删除。我没能找到原因,但它可能与img src是一个链接,因此有不同的风格?
所以如果你想修复你可以使用SVG

<svg></svg>

我知道这是一个很晚的React,但它是一个方法,任何人找到这个职位

相关问题