css - 有什么方法可以从 CSS 中使用 SVG Sprite？

Question

HTML：

<svg>
    <use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>
</svg>

SVG精灵：

<svg width="0" height="0" class="hidden">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">
        <path ... fill="currentColor"></path>
    </symbol>
</svg>

有什么方法可以使用 CSS 中的 SVG sprite

像这样

<div class=“icon”&gt;</div>

.icon {
background-image: “/assets/images/icons-sprite.svg#icon-name”
height: 30px

}

Answer 1

我正在使用此处描述的包含 SVG 的技术，您可以创建一个看起来像这样的文档……</p>

<svg xmlns="http://www.w3.org/2000/svg">

    <symbol id="arrow-left" viewBox="0 0 10 16">
        <path d="M9.4 1.4L8 0 0 8l8 8 1.4-1.4L2.8 8z"/>
    </symbol>

    <symbol id="arrow-right" viewBox="0 0 10 16">
        <path d="M0 14.6L1.4 16l8-8-8-8L0 1.4 6.6 8z"/>
    </symbol>

</svg>

将它包含在 HTML 的顶部，然后像这样在标记中插入 SVG 图标……</p>

<svg class="arrow-right">
  <use xlink:href="#arrow-right" />
</svg>

这很容易而且效果很好。但是，我试图在我的 CSS 伪类中使用相同的图标 :before 和 :after 在后台使用空内容属性和 SVG。像这样的……</p>

.title:after {
    float: right;
    width: 16px;
    height: 10px;
    content: "";
    background: url('#arrow-right');
}