如何在CSS背景中引用同一个SVG文件中的不同SVG？

Question

我正在创建一个网站，该网站的一个非常重要的要求是拥有最少数量的文件。我可以减少文件数量的地方之一是项目的 SVG 文件。目前这个项目正在使用 10 多个 SVG 文件，我希望将它们全部合并到一张 SVG sprite 表中。由于这些 SVG 文件被用作 CSS 中的背景图像：

.class-name {
    background-image: url(/path/to/file.svg)
}

我现在有一个 svg 文件，其中之前的每个 SVG 文件都是一个符号，因此 svg 文件如下所示：

<svg>
    <symbol id="id1">....</svg>
    <symbol id="id2">....</svg>
    <symbol id="id3">....</svg>
...
</svg>

我希望在 CSS 中使用这些符号，如下所示：

.class-name {
    background-image: url(/path/to/combined-file.svg#id1)
}

如何在背景图像中使用 SVG 符号。

我已经尝试过以下操作：

.class-name {
    background-image: url(/path/to/combined-file.svg#id1)
}

并且

.class-name {
  background-image: url("data:image/svg+xml;base64,<svg><use xlink:href="path/to/combined-svg#id1/></svg>"");
}

我还尝试将所有<symbol>标签转换为<g>标签，但随后所有图像开始相互重叠，因此变得毫无意义。

我希望有一种解决方案，其中我的所有 SVG 都在一个文件中，并且我可以在 CSS 背景图像中单独引用它们。

Answer 1

这是我使用 svg sprites 作为背景的示例：

div{width:300px;height:300px; border:1px solid;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat);
  background-size:200px;
  background-repeat: no-repeat;
  background-position: center;
}

<div></div>

您还可以使用#blackcat

组合文件如下所示：（请观察style此规则svg > svg:not(:target) {display: none;}隐藏所有嵌套 svg 元素的元素，除非它们是目标）

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"  viewBox="0 0 225 225">

<style type="text/css">
 <![CDATA[  
    /* this is hiding all the nested svg elements unless they are the target*/
    svg > svg:not(:target) {
    display: none;
    }
     ]]> 
</style>
<desc>
<g id="cat">
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506,108.953.....108.953z"/>
<path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,18.651......81.453z"/>
</g>
</desc>
<svg version="1.1" id="blackcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="black" />
</svg>
<svg version="1.1" id="redcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="red" />
</svg>

</svg>

我希望这就是您所需要的。

您将在本书中找到对此的详细解释：Using SVG with CSS3 and HTML5: Vector Graphics for Web Design