CODEWITHSUNDEEP
htmlcsssvg
Mechetle
Mechetle

Reputation: 58

How do you get rid of these small transparent pixel lines in a svg?

I'm having some problems when I imported my svg image as a background in css, it seems like one of the mountains in my background have this small transparent lines. But for some reason it only appears in Chrome but not FireFox. Thanks.

closeup

here's the 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>

Upvotes: 0

Views: 558

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31805

This is a drawing bug in webkit/Chrome that seems to be triggered by the repeated use of feOffset to layer content more than 3 layers deep. If you resize the iframe in the jsfiddle, you'll see that the thin lines stay fixed relative to the parent window, not the content - so it seems to be a low level bug. Based on my experiments, any shape that is 4 or more layers deep gets the drawing artifact.

Easiest way to fix is to define your shape once in defs and utilize multiple use elements to place and color them.

I've filed bug#660745 with Chrome.

(That said - your filters have badly specified primitives (no stdDeviation for the (unused) GaussianBlur, no filter dimensions, no mode for the feBlend) that you should fix. These are better specified versions of your filters.)

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

Upvotes: 1

Related Questions