全宽svg随机空白问题

Question

我正在使用SVG来分隔我页面上的全宽度部分而且我遇到过SVG这个问题，在某些分辨率下，svg中的形状在侧面或底部偏移了几个像素

在某些浏览器和某些分辨率中，这根本不会发生。 Firefox似乎根本不受此影响。然而，它在Android（4.4.4）和Chrome（38.0.2125.114）中尤其明显。似乎是一个webkit / blink问题。

我正在使用的SVG：

<svg version="1.1" id="my-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1920 185">
    <path d="M0,185L1680,5c0,0,50-10,80,0s50,20,50,20l110,70v90"/>
  </svg>

我尝试用边距来解决这个问题，但是它也影响了很好的分辨率，这些分辨率现在有了不受欢迎的尖角。

知道造成这种偏移的原因是什么吗？有关解决方法/修复的任何建议吗？

由于

Answer 1

两件事：

1. 您的viewBox属性拼写错误。 viewbox不是有效的属性名称。

2. 如果这没有帮助，请尝试在preserveAspectRatio="none"属性后添加viewBox。它可能有助于改善任何像素舍入问题。