为什么我的SVG在Chrome显示正常但Firefox无法正常渲染？

问题修复方案 #

根因说明 #

Firefox 对动态创建的 SVG use 元素引用外部精灵图的兼容规则比 Chrome 更严格，主要存在两个兼容坑：一是仅设置 xlink:href 无法覆盖所有版本的渲染逻辑，二是对外部 SVG 文件的 MIME 类型校验更严格。

修复步骤 #

1. 给use元素同时添加标准href属性
   把原来仅设置xlink:href的逻辑，改为同时添加不带命名空间的标准href属性，兼容不同版本 Firefox 的解析规则：

const editIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
editIcon.classList.add('to-do-icon');
const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
// 保留原xlink:href兼容老版本
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'images/icons.svg#edit');
// 新增标准href属性适配新版本Firefox
use.setAttribute('href', 'images/icons.svg#edit');
editIcon.appendChild(use);

const deleteIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
deleteIcon.classList.add('to-do-icon');
const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
use2.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'images/icons.svg#delete');
use2.setAttribute('href', 'images/icons.svg#delete');
deleteIcon.appendChild(use2);

svgContainer.appendChild(editIcon);
svgContainer.appendChild(deleteIcon);

2. 校验SVG文件的响应MIME类型
   检查服务器返回images/icons.svg的响应头中Content-Type字段的值是否为image/svg+xml，Firefox 遇到非标准MIME类型的SVG文件会直接拒绝解析渲染，Chrome 对此容错性更高。
3. 降级兼容方案（可选）
   如果外部引用的兼容问题持续存在，可以直接把SVG精灵图的代码内嵌到HTML页面的<body>起始位置，外层保留width="0" height="0" class="hidden"的隐藏属性即可，其余内容不需要改动，所有浏览器都可以直接识别引用，不存在外部文件解析的兼容问题。

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