为什么Vue3仅能渲染SVG雪碧图中的第一个图标？

这是Vue 3.1.x版本的框架已知BUG，与SVG语法无关。

问题原因 #

Vue 3.1.x版本处理带哈希片段的静态资源路径时，内部缓存逻辑存在缺陷：首次加载资源后会裁剪URL的哈希片段，后续复用同一资源路径时就会丢失#id部分，无法正确定位雪碧图内的symbol。你的SVG雪碧图结构完全符合规范，在Vue 2.x中正常运行也验证了语法正确性。

解决方案 #

• 优先升级Vue版本：该问题在Vue 3.2.0及后续稳定版本中已被官方修复，升级到对应版本即可解决，无需修改业务代码。
• 若暂时无法升级Vue，可选择以下临时方案：
  1. 替换属性写法：将href属性替换为SVG兼容的xlink:href属性，该属性不会触发上述有问题的缓存逻辑，示例如下：

     <svg>
       <use xlink:href="@/assets/images/icons-master.svg#project"></use>
     </svg>
     

  2. 内联雪碧图内容：把SVG雪碧图的完整代码直接内联到页面DOM顶部，设置display:none隐藏，后续引用时直接写哈希ID即可，无需带资源路径：

     <svg>
       <use href="#project"></use>
     </svg>
     

  3. 追加查询参数规避缓存：给每个重复引用的资源路径后添加不同的无意义查询参数，避开错误的缓存匹配，示例如下：

     <svg>
       <use href="@/assets/images/icons-master.svg#project?tag=1"></use>
     </svg>
     <svg>
       <use href="@/assets/images/icons-master.svg#project?tag=2"></use>
     </svg>
     

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