0

我有大约 30 个彩色 .SVG 图标，为了简单起见并减少发送到服务器的请求数量，我创建了一个集成的 .SVG，如下所示：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:svgjs="http://svgjs.dev/svgjs">
    <defs>
        <style>
            <![CDATA[
      .sprite { display: none; }
      .sprite:target { display: inline; }
    ]]>
        </style>
    </defs>
    <svg class="sprite" id="search" viewBox="0 0 24 24">
        <g  transform="matrix(1,0,0,1,0,0)">
            <path d="M 9 2 C 5.1458514 2 2 5.1458514 2 9 C 2 12.854149 5.1458514 16 9 16 C 10.747998 16 12.345009 15.348024 13.574219 14.28125 L 14 14.707031 L 14 16 L 20 22 L 22 20 L 16 14 L 14.707031 14 L 14.28125 13.574219 C 15.348024 12.345009 16 10.747998 16 9 C 16 5.1458514 12.854149 2 9 2 z M 9 4 C 11.773268 4 14 6.2267316 14 9 C 14 11.773268 11.773268 14 9 14 C 6.2267316 14 4 11.773268 4 9 C 4 6.2267316 6.2267316 4 9 4 z" fill="#616161" class="color000 svgShape"></path>
        </g>
    </svg>
    <svg id="history" class="sprite"  viewBox="0 0 48 48">
        <g transform="matrix(1,0,0,1,0,0)">
            <path fill="none" d="M0 0h48v48h-48z"></path>
            <path d="M25.99 6c-9.95 0-17.99 8.06-17.99 18h-6l7.79 7.79.14.29 8.07-8.08h-6c0-7.73 6.27-14 14-14s14 6.27 14 14-6.27 14-14 14c-3.87 0-7.36-1.58-9.89-4.11l-2.83 2.83c3.25 3.26 7.74 5.28 12.71 5.28 9.95 0 18.01-8.06 18.01-18s-8.06-18-18.01-18zm-1.99 10v10l8.56 5.08 1.44-2.43-7-4.15v-8.5h-3z" opacity=".9" fill="#757575" class="color000 svgShape"></path>
        </g>
    </svg>
    
// more icons here
</svg>

我在我的 html 页面中调用我的图标，如下所示：

<img class="w3-width-30 w3-height-30 w3-padding-all-4 w3-right" src="~/icons/Sprite.svg#comment" />

并且在某些页面中超过 20 个图标。

问题：在加载页面期间，发送到服务器的请求太多，所以我认为我的精灵不工作。我不知道怎么了？

在此处输入图像描述

4

1 回答 1

0

我不知道加载带有标签的 SVG 精灵，但还有另一种在页面上加载精灵的方法。

遵循代码片段可以轻松完成您的工作。首先，您必须添加 SVG 文件位置而不是图标的 id。

<svg width="50" height="50">
    <use xlink:href="/sprite.svg#history" />
<svg>

您可以在标签或标签中使用它

<a href="#">
    <svg width="50" height="50">
        <use xlink:href="/sprite.svg#history" />
    <svg>
</a>

这里还有一个基础Same origin policy。

如果您在其中使用 URL，则xlink:href它们需要从同一域加载。以这种方式加载的 SVG 具有跨域保护。有些人只是直接从他们的静态资产中提供服务。您也可以使用代理。

于 2021-05-21T16:26:17.293 回答