Firefox中SVG的stroke-dashoffset与stroke-dasharray属性失效求助

针对你遇到的问题，给你几个针对性的排查和解决方向：

1. 确认目标元素的基础stroke属性是否齐全 #

Firefox对SVG stroke属性的要求更严格，必须显式设置stroke颜色（哪怕是透明色stroke: transparent;），否则stroke-dasharray和stroke-dashoffset不会生效。检查你的目标路径元素是否有设置stroke，比如：

.your-target-path {
  stroke: #000; /* 必须设置，默认值为none */
  stroke-width: 2; /* 确保线条有可见宽度 */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

2. 排查#textic和#pathic的疑问 #

如果设置display: none后没变化，先做这两步验证：

• 打开Firefox开发者工具（F12），在元素面板搜索这两个ID，确认它们确实存在于SVG结构中，且选择器没有写错（比如是否误将ID选择器写成了类选择器.textic）。
• 查看这两个元素的样式面板，看display: none是否被其他样式覆盖（比如内联样式style="display: block;"会优先覆盖CSS规则）。
  如果这两个元素不是你动画的目标，那它们的显示状态不影响dash属性，但如果你的JS/CSS代码误把它们当成了动画目标，那肯定会导致动画失效。

3. 路径长度与动态设置的问题 #

如果你用JS动态调用getTotalLength()获取路径长度来设置dash属性，Firefox的计算结果可能和Chrome/JSFiddle环境有差异：

• 先尝试手动设置固定值测试，比如stroke-dasharray: 800; stroke-dashoffset: 800;，看是否有动画效果，排除动态计算的问题。
• 用Firefox开发者工具的「布局」面板查看路径的实际长度，对比JS返回的getTotalLength()值是否一致，不一致的话手动调整数值。

4. 检查CSS优先级与样式覆盖 #

在Firefox开发者工具的样式面板中，查看目标元素的stroke-dasharray和stroke-dashoffset是否被划掉（表示被更高优先级的样式覆盖）。比如内联样式、ID选择器的优先级会高于类选择器，确保你的动画样式优先级足够。

5. 确认SVG viewBox属性是否存在 #

没有viewBox属性的SVG在Firefox中可能渲染异常，导致路径显示不正确，看起来像是dash属性没生效。检查你的SVG根元素是否设置了viewBox，比如：

<svg viewBox="0 0 1000 500" width="100%" height="auto">
  <!-- 你的路径元素 -->
</svg>

快速验证步骤 #

1. 给目标路径加内联样式，直接写死dash属性和动画：

<path id="your-target" style="stroke: #000; stroke-width: 2; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1s;" d="..."></path>

2. 在开发者工具的控制台执行document.getElementById('your-target').style.strokeDashOffset = '0';，看路径是否有动画效果。如果有，说明是你的CSS/JS代码的问题；如果没有，检查路径本身是否正确（比如d属性是否为空、路径是否在可视区域内）。

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