css SVG背景 - 周围奇怪的透明线

Question

我曾尝试在css中使用svg图像作为背景图像。我面临着奇怪的行为。具有svg背景的元素周围有奇怪的透明线。

在下面的示例中，它显示为第一个和第二个div之间的线。线条的大小根据元素的宽度而变化。

http://jsfiddle.net/mahnunchik/g1ux4e7o/

来自jsfiddle的截图：

至少在Windows和Linux上的Chrome 37和FF 32中重现

Svg图像非常简单：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 76" enable-background="new 0 0 1920 76">
  <path fill="#DE4943" d="M0 76L1921 0 0 0z"/>
</svg>

知道如何解决这个问题吗？或者如何解释？

Answer 1

尝试将preserveAspectRatio="none"添加到<svg>元素。

此外，您不需要enable-background属性。

Answer 2

尝试将stroke-width =“0”添加到路径