css SVG background - strange transparent line around

Question

I have tried to use svg image as background-image in css. And I have faced with strange behavior. Element that has svg background has strange transparent line around.

In the example below it is shown as line between the first and the second div. Size of the line changes depending on width of the element.

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

Screenshot from jsfiddle:

It reproduces at least in Chrome 37 and FF 32 on Windows and Linux

Svg image is quite simple:

<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>

Any idea how to fix that? Or how to explain that?

Answer 1

Try adding preserveAspectRatio="none" to your <svg> element.

Also you don't need the enable-background attribute.

Answer 2

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