为什么我的 SVG 在 Chrome 中正确显示，但在 Firefox 中显示不正确？

Question

我正在使用 SVG spriting 在 JS 中将 SVG 附加到我的页面：

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");
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink: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');
deleteIcon.appendChild(use2);

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

Svg Spriting 文件：

<svg width="0" height="0" class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="edit">
    <path d="M 18.414062 2 C 18.158062 2 17.902031 2.0979687 17.707031 2.2929688 L 15.707031 4.2929688 L 14.292969 5.7070312 L 3 17 L 3 21 L 7 21 L 21.707031 6.2929688 C 22.098031 5.9019687 22.098031 5.2689063 21.707031 4.8789062 L 19.121094 2.2929688 C 18.926094 2.0979687 18.670063 2 18.414062 2 z M 18.414062 4.4140625 L 19.585938 5.5859375 L 18.292969 6.8789062 L 17.121094 5.7070312 L 18.414062 4.4140625 z M 15.707031 7.1210938 L 16.878906 8.2929688 L 6.171875 19 L 5 19 L 5 17.828125 L 15.707031 7.1210938 z"></path>
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="delete">
    <path d="M 10 2 L 9 3 L 4 3 L 4 5 L 5 5 L 5 20 C 5 20.522222 5.1913289 21.05461 5.5683594 21.431641 C 5.9453899 21.808671 6.4777778 22 7 22 L 17 22 C 17.522222 22 18.05461 21.808671 18.431641 21.431641 C 18.808671 21.05461 19 20.522222 19 20 L 19 5 L 20 5 L 20 3 L 15 3 L 14 2 L 10 2 z M 7 5 L 17 5 L 17 20 L 7 20 L 7 5 z M 9 7 L 9 18 L 11 18 L 11 7 L 9 7 z M 13 7 L 13 18 L 15 18 L 15 7 L 13 7 z"/></path>
  </symbol>
</svg>

我用明确的高度、宽度和填充值设置了它们的样式，所以我认为问题不在于它们不可见或溢出容器。当我给它们加上边框并使用事件侦听器时，它们在两种浏览器中都可以正常工作。当我查看 Chrome 中的开发工具时，我可以看到 'use' 标签下的#shadow-root 正确获取了 SVG 引用，但是在 Firefox 中，#shadow-root 中没有包含任何内容。我该如何为 firefox 解决这个问题？

on Chrome one Firefox

Answer 1

感谢zgood的解答！

路径标签加倍，第一个路径标签没有结束'/>'。显然 Chrome 比 Firefox 更好地处理无效语法。

正确的精灵文件：

<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <symbol id="edit">
    <path d="M 18.414062 2 C 18.158062 2 17.902031 2.0979687 17.707031 2.2929688 L 15.707031 4.2929688 L 14.292969 5.7070312 L 3 17 L 3 21 L 7 21 L 21.707031 6.2929688 C 22.098031 5.9019687 22.098031 5.2689063 21.707031 4.8789062 L 19.121094 2.2929688 C 18.926094 2.0979687 18.670063 2 18.414062 2 z M 18.414062 4.4140625 L 19.585938 5.5859375 L 18.292969 6.8789062 L 17.121094 5.7070312 L 18.414062 4.4140625 z M 15.707031 7.1210938 L 16.878906 8.2929688 L 6.171875 19 L 5 19 L 5 17.828125 L 15.707031 7.1210938 z"/>
  </symbol>
  <symbol id="delete">
    <path d="M 10 2 L 9 3 L 4 3 L 4 5 L 5 5 L 5 20 C 5 20.522222 5.1913289 21.05461 5.5683594 21.431641 C 5.9453899 21.808671 6.4777778 22 7 22 L 17 22 C 17.522222 22 18.05461 21.808671 18.431641 21.431641 C 18.808671 21.05461 19 20.522222 19 20 L 19 5 L 20 5 L 20 3 L 15 3 L 14 2 L 10 2 z M 7 5 L 17 5 L 17 20 L 7 20 L 7 5 z M 9 7 L 9 18 L 11 18 L 11 7 L 9 7 z M 13 7 L 13 18 L 15 18 L 15 7 L 13 7 z"/>
  </symbol>
</svg>

为什么我的 SVG 在 Chrome 中正确显示，但在 Firefox 中显示不正确？

Why are my SVGs showing properly in Chrome but not Firefox?

html

css

svg

cross-browser

sprite