从外部 SVG 精灵文件中使用 SVG 渐变时，它不会被渲染答案

【问题标题】：SVG gradients not getting rendered when using it from external SVG-sprite file从外部 SVG 精灵文件中使用 SVG 渐变时，它不会被渲染
【发布时间】：2021-06-17 05:36:18
【问题描述】：

只有当我将 svg sprite 作为代码包含在同一个文件中时，渐变才能正常工作，这首先破坏了拥有 svg sprite 的目的。我从 3 年前的另一篇文章中读到，有人说它被窃听了，但肯定必须对此进行修复吗？

精灵是如何形成的：<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"> <symbol id="backpack" viewBox="0 0 177.4 181.2"> <defs>(some code)</defs> (some paths) </symbol></svg>

index.html中精灵的使用

        <svg class="nav-icon" id="nav-backpack">
        <use href="svgNew/sprites/icons-nav-elementArt.svg#backpack"></use>
    </svg>

How it renderds from external file

How it renders if I keep the svg sprite in the same document

【问题讨论】：

标签： html svg sprite svg-sprite

【解决方案1】：

我找到了一个快速修复。在 SVG sprite 中，从符号标签中获取所有的 defs 并将它们放在 SVG sprite 的顶部。然后将 SVG 的样式更改为可见性：隐藏，它应该可以工作。然而，由于一些错误，它不能在谷歌浏览器上运行。

【讨论】：