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

Question

I have tried to use svg image as background-image in css. 我试图将svg图像用作CSS中的背景图像。 And I have faced with strange behavior. 而且我遇到了奇怪的行为。 Element that has svg background has strange transparent line around. 具有svg背景的元素周围有奇怪的透明线。

In the example below it is shown as line between the first and the second div. 在下面的示例中，它显示为第一和第二div之间的线。 Size of the line changes depending on width of the element. 线的大小根据元素的宽度而变化。

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

Screenshot from jsfiddle: jsfiddle的屏幕截图：

在此处输入图片说明

It reproduces at least in Chrome 37 and FF 32 on Windows and Linux 它至少可以在Windows和Linux上的Chrome 37和FF 32中重现

Svg image is quite simple: 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>

Any idea how to fix that? 任何想法如何解决？ Or how to explain that? 或如何解释？

Answer 1

Try adding preserveAspectRatio="none" to your <svg> element. 尝试在<svg>元素中添加preserveAspectRatio="none" 。

Also you don't need the enable-background attribute. 另外，您不需要enable-background属性。

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
0 2014-10-09 00:30:05

解决方案2
0 2014-11-05 18:15:43

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

问题描述

2 个解决方案

解决方案1 0 2014-10-09 00:30:05

解决方案2 0 2014-11-05 18:15:43

解决方案1
0 2014-10-09 00:30:05

解决方案2
0 2014-11-05 18:15:43