0

仅当我将 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>

它如何从外部文件呈现

如果我将 svg sprite 保存在同一个文档中，它会如何呈现

4

1 回答 1

0

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

于 2021-06-16T13:58:04.010 回答