Css 使用<；字形>；as'；背景图像'；，取自单个SVG

我知道我可以为每个图标使用一个SVG文件，然后将其作为背景图像使用，包括：

.my-button {
    background-image: url(binaries/icons/my-icon.svg);
}

或 我可以使用unicode值定义glyph，然后根据在：after/：before伪元素中应用的

内容将其添加到我的样式中，如下所示：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <font id="fontello" horiz-adv-x="1000" >
            <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
            <missing-glyph horiz-adv-x="1000" />
            <glyph glyph-name="my-icon unicode="&#xe800;" d="m564 422l-234-224q-18-18-40-18t-40 18l-234 224q-16 16-16 41t16 41q38 38 78 0l196-188 196 188q40 38 78 0 16-16 16-41t-16-41z" horiz-adv-x="580" />
            <glyph glyph-name="up-open" unicode="&#xe805;" d="m564 280q16-16 16-41t-16-41q-38-38-78 0l-196 188-196-188q-40-38-78 0-16 16-16 41t16 41l234 224q16 16 40 16t40-16z" horiz-adv-x="580" />
        </font>
    </defs>
</svg>

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    ...
}

.glyphicon__my-iconn:before {
    content: "\e800";
}

但是
我想知道是否有可能在单个SVG文件中直接引用一个glyph，可能有一个绝对/相对路径，并将其用作backgound image url（），而无需定义其他类，只需将样式应用于所需的样式（本例中为我的按钮）。比如（只是一个例子，我不知道正确的URI格式应该是什么）：

这非常适合：


加载图示符图标时只有一个HTTP请求
跳过为每个图标定义一个类（如果我有200个图标怎么办？？），只使用它们

有什么方法可以做到这一点吗？
我对这个话题做了一个简短的挖掘（正在搜索它并找到了那个问题）。据我所知，可能有办法做到这一点，但它缺乏浏览器支持

我想到的是有一个小解析器（像一个简单的grunt任务），它可以将glyph更改为视图和路径，然后按照这里所述使用它们：（背景图像方法）

希望它能指引你到某个地方。我可能会进一步挖掘这个主题，但到目前为止，似乎只有这样做才有可能（所以不是在所有浏览器中都是如此）。
U对。我也发现了这种方法，即使它有优势（大公司使用这种方法），我个人也不太喜欢这种方法。最后，我放弃了创建多个类或使用一些智能SCS混音。我只需将SVG中定义的图标名称传递给我的mixin（这样，就不会有不清楚的HTML实体或字符在SVG图标集的不同版本中发生变化）。目前，这是一个符合我需求的公平解决方案（可以快速维护，支持CSS彩色图标）。但我希望进一步支持在SVG-XML文件中查询单个标志符号的方法。您尝试过这种方法吗？
.my-button {
    background-image: url(binaries/icons/my-fontello-font.svg?font=fontello#my-icon
}