跨浏览器 SVG sprite stack 解决方案答案

【问题标题】：Cross-browser SVG sprite stack solution跨浏览器 SVG sprite stack 解决方案
【发布时间】：2016-03-31 20:33:15
【问题描述】：

我正在拼命尝试让 SVG 精灵堆栈在所有浏览器 (IE8+) 中工作。我正在使用很棒的https://github.com/jkphl/svg-sprite 来生成堆栈，并且我已经阅读了很多关于该主题的内容。正如https://betravis.github.io/icon-methods/svg-sprite-sheets.html 建议的那样，目前最安全的解决方案（就浏览器支持而言）似乎是这样的

<iframe src='bunnies.svg#carrot-bunny'></iframe>

这确实适用于我需要定位的所有浏览器。然而这带来了一个新问题：因为我在 iframes src 属性中使用了一个锚点，所以浏览器会滚动到这个 iframe（这当然是不希望的）。

我找到了一个解决方法：我通过 CSS 隐藏 iframe（显示：无）并将其更改为“显示：块”，一旦我得到 Windows 加载事件。这种解决方法可以在除 Safari 之外的所有浏览器中完成，只要 iframe 出现，浏览器就会滚动到 iframe。

我现在有点迷路了。你知道在 Safari 中防止这种行为的方法吗？还是我应该更好地遵循另一种方法？如何让 SVG 精灵堆栈工作？

【问题讨论】：

【解决方案1】：

因此，在撰写本文时，显然不可能在支持所有主要浏览器的同时使用 SVG 堆栈。我现在使用 SVG 符号 (https://css-tricks.com/svg-symbol-good-choice-icons/)，一旦在 Safari 中的 img 标签中尊重锚点，我将切换到 SVG 堆栈。

【讨论】：