为啥我的 SVG 在 Chrome 而不是 Firefox 中正确显示？

Posted 2023-03-06

【中文标题】为啥我的 SVG 在 Chrome 而不是 Firefox 中正确显示？

【英文标题】：Why are my SVGs showing properly in Chrome but not Firefox?为什么我的 SVG 在 Chrome 而不是 Firefox 中正确显示？

【发布时间】：2021-12-11 04:04:00

【问题描述】：

我正在使用 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 精灵文件：

<svg   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

【问题讨论】：

可能与无效的 SVG 标记有关。您已将 xmlns 和 viewBox 属性放在符号节点上，而不是它们通常所在的 svg 节点上。您还有一个自动关闭的<path />，但还有一个单独的关闭标签</path>。使用其中之一，而不是两者都使用。也许 Chrome 只是比 FireFox 更好地处理这些问题

是的，它是双路径标签！谢谢你！！

Firefox 不会接受无效的 XML。 Chrome 尝试解决错误的语法。

【参考方案1】：

感谢zgood的回答！

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

正确的精灵文件：

<svg   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>