html - SVG 图像显示我无法移除的细边框
问题描述
我的 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;
}
解决方案
这是由浏览器中的 svg 渲染器试图平滑您的 svg 图像引起的。
您有以下修复:
选项 1:禁用边缘平滑
img.svgfix rect {
shape-renderer: crispEdges;
}
浏览器支持是所有主流浏览器。
权衡:边缘变得锯齿状。
查看文档
选项 2:重叠图形
确保您<rect>
与 html 元素重叠,这样由平滑引起的间隙不可见。
例如,您可以为 svg 元素添加边框。
推荐阅读
- performance - 灯塔:结果之间的差异
- c# - WPF 画布平移和缩放
- python - Redis时间序列 - 汇总所有命中
- python - 如何在执行脚本之前自动清除 VSCode 中的终端?
- java - Java:ECDSA 签名验证返回不一致的结果
- python - 如何在 PyQt5 中获取当前关注的小部件对象名称?
- node.js - Ubuntu 18.04 Apache 在 AWS EC2 中自动为基于 NodeJS Angular 的应用程序频繁崩溃并停止
- .htaccess - 在使用 cPanel 的 Linux 主机中从 HTTP 重定向到 HTTPS 不起作用
- javascript - 如何在猫鼬中检索以一对多关系存储的文档
- javascript - 使用 Javascript 变量作为启动 mySQL 查询的 PHP 函数的参数的未捕获的 TypeError 消息