有啥方法可以从 CSS 中使用 SVG Sprite？

Posted 2023-03-04

【中文标题】有啥方法可以从 CSS 中使用 SVG Sprite？

【英文标题】：Any way to use SVG Sprite from CSS?有什么方法可以从 CSS 中使用 SVG Sprite？

【发布时间】：2021-11-13 12:30:30

【问题描述】：

html：

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

SVG 精灵：

<svg   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”></div>

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

【问题讨论】：

没有。符号只能通过使用标签呈现，背景图片不是使用标签。

【参考方案1】：

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

<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 图标……

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

这很简单，效果很好。但是，我尝试在我的 CSS 伪类中使用相同的图标 :before 和 :after 使用空的内容属性和背景中的 SVG。像这样的……

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