我有非常简单的 svg,只有一种颜色和三个多边形点。
在某些宽度的 Chrome 中,svg 之前有一条不应该存在的白线:
顶部有一个相同颜色的div。 svg 甚至与具有相同颜色的 div 重叠,但
margin-bottom -10px;
但那条白线始终出现:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 145" style="enable-background:new 0 0 1920 145;" xml:space="preserve">
<style type="text/css">
.st0{fill:#262120;}
</style>
<g>
<polygon class="st0" points="1920,145 0,0 1920,0 "/>
</g>
</svg>
这里有什么问题?
这可能是因为所有 html 元素在 css 中都设置了正常的行高。
line-height: 0;
可以解决这个问题🙇u200d♂️
shape-rendering="crispEdges"
我也有同样的问题。形状渲染为我解决了这个问题。 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering