SVG路径动画填充色异常求助：指定#e67700却显示黑色

问题原因 #

你使用stroke-dasharray和stroke-dashoffset实现路径描边动画时，仅设置了fill="#e67700"，但动画过程中显示的是路径的描边颜色（SVG默认描边色为黑色），而非填充色——填充色仅作用于闭合路径的内部区域，和描边动画的视觉表现无关。

修复方法 #

给目标路径添加stroke="#e67700"属性，将描边颜色设置为你需要的橙色即可。如果是开放路径，可保留fill="none"（开放路径填充无实际视觉效果）；如果是闭合路径需要同时显示填充，可保留原fill设置。

修改后的核心代码示例 #

<path d="M20,20 L100,20 L100,100 L20,100 Z" 
      fill="#e67700" 
      stroke="#e67700" 
      stroke-width="2"
      stroke-dasharray="320" 
      stroke-dashoffset="320">
  <animate attributeName="stroke-dashoffset" 
           from="320" to="0" 
           dur="2s" 
           fill="freeze"/>
</path>

补充说明 #

如果你的需求是实现填充区域的动画而非描边动画，需要改用clip-path结合形状动画的方案，但从你的场景来看，当前是描边动画场景，设置描边颜色即可解决问题。

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