我有一个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;
}
3条答案
按热度按时间kknvjkwl1#
这是由于浏览器中的svg渲染器试图平滑你的svg图像造成的。
您有以下修复:
选项一:禁用边缘平滑
浏览器支持所有主流浏览器。
权衡:边缘变得锯齿状。
查看docs
选项二:重叠图形
确保
<rect>
与html元素重叠,这样平滑处理造成差距就看不见了。例如,您可以为svg元素添加边框。
xsuvu9jc2#
我所做的是改变svg的填充颜色以匹配其背景的颜色。一旦我这样做了,这些行就从svg中删除了。
q3qa4bjr3#
我发现在src标签中使用SVG:
它会在你的svg周围放一个边框,如果你使用了SVG标签,它应该被删除。我没能找到原因,但它可能与img src是一个链接,因此有不同的风格?
所以如果你想修复你可以使用SVG
我知道这是一个很晚的React,但它是一个方法,任何人找到这个职位