如何去除SVG中的黑色区域？SVG动画黑色阴影问题求助

核心原因 #

1. 路径默认填充黑色：你的<path>元素未设置fill属性，SVG规范中路径默认填充色为黑色，路径包围的区域因此被填充黑色，也就是你看到的“阴影”。
2. SVG标签属性语法错误：你将xmlns属性错误嵌套在style属性内部，导致XML命名空间无法正确识别，同时存在引号嵌套错误。
3. 描边动画不完整：stroke-dashoffset动画需要配合stroke-dasharray才能实现预期的描边绘制效果，当前缺少该属性导致动画表现异常。

解决步骤 #

• 给<path>添加fill="none"，彻底取消路径填充，消除黑色区域。
• 修正SVG标签属性写法，将xmlns作为独立属性，修复引号嵌套问题。
• 补充stroke-dasharray属性，让描边动画正常工作（可选，但能实现预期的线条动态效果）。

修正后的完整代码 #

<svg viewBox="0 0 1000 750" xmlns="http://www.w3.org/2000/svg" style="background-color: #E6E6E0;"> 
 <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"
  fill="none"
  stroke-dasharray="1000"
>
  <animate attributeName="stroke-dashoffset" from="0" to="1000" dur="3s" repeatCount="indefinite"/>
</path>
</svg>

关键修改说明 #

• fill="none"：直接关闭路径填充效果，黑色区域立即消失。
• 调整SVG标签属性：将xmlns="http://www.w3.org/2000/svg"移出style属性作为独立属性，同时修正style属性的引号闭合。
• stroke-dasharray="1000"：与stroke-dashoffset的动画范围匹配，实现线条循环移动的动态效果。

内容的提问来源于stack exchange，提问作者DLopes