从外部 SVG-sprite 文件使用 SVG 渐变时未呈现

编程问答 2022-04-24

问题描述

只有当我将 svg 精灵作为代码包含在同一文件中时，渐变才能正常工作，这首先违背了拥有 svg 精灵的目的。我从 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

解决方法

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

htmlspritespritespritespritesvgsvgsvgsvg-sprite