如何在CSS背景中引用同一SVG文件中的不同SVG? [英] How to reference different SVGs inside the same SVG file in CSS background?

问题描述

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

I am creating a website and a very important requirement of this website is to have a minimal number of files. One place where I can reduce the number of files are the SVG files of the project. Currently this project is using 10+ SVG files and I hope to combine them all into one SVG sprite sheet. Since these SVG files were being used as background images in CSS:

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

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

I now have an svg file, where each one of the previous SVG files is a symbol, so the svg file looks like this:

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

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

I wish to use these symbols in my CSS as follows:

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

如何在背景图片中使用SVG符号.

How can I use the SVG symbols in my background image.

我已经尝试了以下方法:

I have already tried the following:

.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>标签，但随后所有图像开始相互重叠，因此变得毫无意义.

I have also tried converting all the <symbol> tags to <g> tags but then all the images start to overlap each other and therefore it becomes pointless.

我希望找到一种解决方案，将所有SVG都放在一个文件中，并且可以在CSS背景图像中分别引用它们.

I am hoping for a solution where all my SVG are in one file and i can reference them individually in my CSS background image.

推荐答案

这是我使用svg精灵作为背景的示例:

This is an example where I'm using svg sprites as background:

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

You can also use the #blackcat

合并后的文件如下所示: (请注意style元素，在该规则中svg > svg:not(:target) {display: none;}会隐藏所有嵌套的svg元素，除非它们是目标)

The combined file looks like this: (Please observe the style element where this rule svg > svg:not(:target) {display: none;} is hiding all the nested svg elements unless they are the target)

<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>

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

I hope this is what you need.

您会在本书中详细解释以下内容:在CSS3和HTML5中使用SVG:用于网页设计的矢量图形

You will find this explained in detail in this book: Using SVG with CSS3 and HTML5: Vector Graphics for Web Design

这篇关于如何在CSS背景中引用同一SVG文件中的不同SVG?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！