引入Node.js后项目SVG标签偶发不显示该如何修复？

修复方案 #

按以下优先级逐步排查修改即可解决：

• 首先修复SVG标签的尺寸声明缺失问题
  你当前的SVG和rect标签没有明确的渲染尺寸约束，浏览器偶发无法识别SVG渲染边界，导致不显示，给SVG添加viewBox属性、给rect添加宽高属性即可：

<button data-title="Add">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 72">
            <rect pathLength="305" width="100%" height="100%"></rect>
       </svg>
</button>

viewBox的后两个值按照你的按钮实际宽高调整即可，不需要完全精准，比例一致就行。

• 确认脚本加载时序符合预期
  1. 检查所有script标签是否保留了defer属性，或者直接将所有script标签移到</body>结束标签之前，保证DOM完全加载后再执行脚本
  2. 所有和DOM、SVG相关的JS逻辑都包裹在DOMContentLoaded事件回调中，避免提前执行：

  document.addEventListener('DOMContentLoaded', () => {
    // 原有JS逻辑放到此处
  })
  

• 确认静态资源路径配置正确
  你当前的Express配置默认托管public目录下的资源，你的独立CSS文件、JS文件都需要放到public目录下，在index.html中用绝对路径引用：

<link rel="stylesheet" href="/css/你的样式文件名.css">
<script src="/js/你的脚本文件名.js" defer></script>

• 排除缓存干扰
  测试时打开浏览器控制台的「网络」 tab，勾选「禁用缓存」，刷新页面测试是否还会复现问题。如果是缓存导致的，可以给静态资源路径加版本后缀（比如/css/style.css?v=1.0）解决线上缓存问题。

你当前的Express服务端代码逻辑没有问题，不需要修改，问题出在前端资源加载和SVG渲染时序上。

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