如何在svg中去除这些小的透明像素线？

Question

当我在css中导入svg图像作为背景时，我遇到了一些问题，背景中的一座山似乎有一条小的透明线。但出于某种原因，它只出现在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的大小，您将看到细线相对于父窗口是固定的，而不是相对于内容-因此这似乎是一个低级别的bug。根据我的实验，任何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>