【发布时间】：2017-08-11 13:42:01
【问题描述】：
我有一个非常简单的 svg，只有一种颜色和三个多边形点。
在某些宽度的 Chrome 中，在 svg 之前有一条白线，它不应该存在：
顶部有一个颜色相同的 div。 svg 甚至与 margin-bottom -10px; 相同颜色的 div 重叠，但白线一直出现：
<?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>
这里有什么问题？
【问题讨论】：
-
不确定是不是中风，可以试试添加中风：#262120;到你的 CSS 类
-
听起来可能类似于图像有时会出现像素间隙。如果你给 svg 一个 vertical-align: top 样式会发生什么？
-
抗锯齿可能吗？
-
缩小 svg 也可能会产生抗锯齿效果。
-
经典技巧似乎都不起作用:(我猜这是一个抗锯齿问题。特别是因为它只发生在某些视口宽度上。
标签： html css google-chrome svg