How to remove black fields from svg-CodePudding

I have the following svg code that I want to animate but I end up with black fields or "sahdows" beneath my lines. I can't seem to be able to get rid of them, anyone have a clue as to why?

<svg viewBox="0 0 1000 750" style="background-color: #E6E6E0; xmlns="http://www.w3.org/2000/svg"> 
 <defs>
  <linearGradient id="gradient">
    <stop offset="50%" stop-color="#30D5C8">
      <animate attributeName="stop-color" values="#30D5C8; #f2c80f; #30D5C8" dur="3s" repeatCount="indefinite"/>
    </stop>
    <stop offset="100%" stop-color="#f2c80f">
      <animate attributeName="stop-color" values="#f2c80f; #30D5C8; #f2c80f" dur="3s" repeatCount="indefinite"/>
    </stop>
    </linearGradient>
  </defs>
<path d="m959 373c-48.5-115.5-97.5-231-153-231-111 0-195 462-306 462s-195-462-306-462c-55.5 0-104.5 115.5-153 231" stroke="url(#gradient)" stroke-linecap="round" stroke-width="16">
  <animate attributeName="stroke-dashoffset" from="0" to="1000" dur="3s" repeatCount="indefinite"/>
</path>
</svg>

I've tried changing every colour code from the code. I expected to remove the color black and to have no "shadow" at all.

CodePudding user response：

If you are referring to the dark color below the first and third section and above the second, then you need to specifically apply a fill="none" to your path:

 <path d="m959 373c-48.5-115.5-97.5-231-153-231-111 0-195 462-306 462s-195-462-306-462c-55.5 0-104.5 115.5-153 231" stroke="url(#gradient)" stroke-linecap="round" stroke-width="16" fill="none">

Without this, the renderer assumes you want the default fill color for your shape.