你怎么摆脱svg中这些小的透明像素线？

Question

当我将svg图像作为css中的背景导入时，我遇到了一些问题，看起来我背景中的一座山有这么小的透明线条。但出于某种原因，它只出现在Chrome中，但不出现在FireFox中。 谢谢。

这是fiddleJS

.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="328.656" viewBox="0 0 1440 328.656" style="shape-rendering: geometricPrecision">
  <defs>
    <style>
      .cls-1 {
        filter: url(#filter);
      }

      .cls-2 {
        filter: url(#filter-2);
      }

      .cls-3 {
        fill: #47c9af;
        fill-rule: evenodd;
      }
    </style>
    <filter id="filter" filterUnits="userSpaceOnUse">
      <feOffset result="offset" dx="81.915" dy="57.358" in="SourceAlpha"/>
      <feGaussianBlur result="blur"/>
      <feFlood result="flood" flood-color="#34495e"/>
      <feComposite result="composite" operator="in" in2="blur"/>
      <feBlend result="blend" in="SourceGraphic"/>
    </filter>
    <filter id="filter-2" filterUnits="userSpaceOnUse">
      <feOffset result="offset" dx="42.596" dy="29.826" in="SourceAlpha"/>
      <feGaussianBlur result="blur"/>
      <feFlood result="flood" flood-color="#16a085"/>
      <feComposite result="composite" operator="in" in2="blur"/>
      <feBlend result="blend" in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="mountain.svg" class="cls-1">
    <g id="_" data-name="&gt;" class="cls-2">
      <path id="Polygon_1" data-name="Polygon 1" class="cls-3" d="M-1.8,845.344L135.187,1083h-273.97Z" transform="translate(0 -812.344)"/>
      <path id="Polygon_1_copy" data-name="Polygon 1 copy" class="cls-3" d="M272.186,903.344L409.171,1141H135.2Z" transform="translate(0 -812.344)"/>
      <path id="Polygon_1_copy_2" data-name="Polygon 1 copy 2" class="cls-3" d="M546.171,845.344L683.156,1083H409.186Z" transform="translate(0 -812.344)"/>
      <path id="Polygon_1_copy_3" data-name="Polygon 1 copy 3" class="cls-3" d="M820.155,903.344L957.14,1141H683.17Z" transform="translate(0 -812.344)"/>
      <path id="Polygon_1_copy_4" data-name="Polygon 1 copy 4" class="cls-3" d="M1094.14,845.344L1231.12,1083H957.155Z" transform="translate(0 -812.344)"/>
      <path id="Polygon_1_copy_5" data-name="Polygon 1 copy 5" class="cls-3" d="M1308.12,812.344L1445.11,1050H1171.14Z" transform="translate(0 -812.344)"/>
    </g>
  </g>
</svg>

Answer 1

这是webkit / Chrome中的一个绘图错误，似乎是由于重复使用feOffset将内容层叠超过3层而引发的。如果你在jsfiddle中调整iframe的大小，你会看到细线相对于父窗口保持固定，而不是内容 - 所以它似乎是一个低级错误。根据我的实验，任何4层或更深层的形状都会获得绘图工件。

最简单的修复方法是在defs中定义一次形状，并使用多个use元素来放置和着色它们。

我已向Chrome提交了bug#660745。

（那就是说 - 你的过滤器有错误指定的基元（没有（未使用过的）GaussianBlur的stdDeviation，没有过滤器尺寸，没有feBlend的模式）你应该修复。这些是更好的指定版本的过滤器。）

<filter id="filter" >
  <feOffset result="offset" dx="81.915" dy="57.358" in="SourceAlpha"/>
  <feFlood result="flood" flood-color="#34495e"/>
  <feComposite result="composite" operator="in" in2="offset"/>
  <feBlend mode="normal" result="blend" in="SourceGraphic"/>
</filter>
<filter id="filter-2">
  <feOffset result="offset" dx="42.596" dy="29.826" in="SourceAlpha"/>
  <feFlood result="flood" flood-color="#16a085"/>
  <feComposite result="composite" operator="in" in2="offset"/>
  <feBlend mode="normal" result="blend" in="SourceGraphic"/>
</filter>