主页 / 问题 / 853136
Accepted
Игорь
Asked:2020-07-11 18:56:38 +0000 UTC2020-07-11 18:56:38 +0000 UTC

SVG 精灵。并非所有图标都加载

  • 772

我在网站上使用 svg sprites。图标相当多（100个左右），显示99%的图标都没有问题。但是有些不加载，或者加载在一个页面上而不是另一个页面上。
在控制台中它会显示一个错误500 (Internal Server Error)（即在加载精灵时）。
有什么建议可能与它有关吗？

我将举一个构建 svg sprite 的示例：

<svg  width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs> 
       <symbol id="icon-apple" viewBox="0 0 56 64">
          ...
       </symbol>
   </defs>
</svg>

我通过 ID 插入 html：

<svg class="svg-icons">
   <use xlink:href="images/svgdefs.svg#icon-apple"></use>
</svg>

不可加载的图标代码（通过 icomoon.io 生成）：

<symbol id="icon-education" viewBox="0 0 40 40">
    <path d="M6.66 16l13.34 8 20-12-20-12-20 12h20v4h-13.34zM0 16v16l4-4.44v-9.16l-4-2.4zM20 40l-14-8.4v-12l14 8.4 14-8.4v12l-14 8.4z"></path>
</symbol>
html

1 个回答

  1. Best Answer

    • 首先，您需要确保使用标签将精灵添加到 HTML <object>

      <object type="image/svg+xml" data="images/svgdefs.svg"> Your browser does not support SVG </object>

    在这里， 详细讨论了从精灵添加图标的主题。

    • 接下来，调用图标ID

      <svg class="svg-icons"> <use xlink:href="images/svgdefs.svg#icon-apple"></use> </svg>

    更新

    这个 sprite 文件构造是多余的

    <svg  width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs> 
       <symbol id="icon-apple" viewBox="0 0 56 64">
          ...
       </symbol>
   </defs>
</svg>

    该部分<defs> ... </defs>充当 svg 中的库存储。

    这部分通常包含现成的代码片段，可以重复使用，直到代码片段被命令调用
    <use xlink:href=#.. ></use>，它是不可见的，不参与程序执行的过程。

    标签<symbol> ... </symbol>的作用与它们相同<defs>——它们在被命令调用之前隐藏一段代码<use>

    <defs>与-的主要区别 <symbol>在于符号标签能够使用附加的viewBox，它允许对 SVG 元素进行附加缩放和定位。

    关于这个主题有CHRIS COYIER 一篇很棒的文章。

    • 5

相关问题