使用 <glyph> 作为“背景图像”,取自单个 SVG
Posted
技术标签:
【中文标题】使用 <glyph> 作为“背景图像”,取自单个 SVG【英文标题】:Use <glyph> as 'background-image', taken from a single SVG 【发布时间】:2015-10-25 10:51:24 【问题描述】:我知道我可以为每个图标使用单个 SVG 文件,然后将其用作 background-image
:
.my-button
background-image: url(binaries/icons/my-icon.svg);
或
我可以使用 unicode 值定义字形,然后根据 :after/:before 伪元素中应用的content
将其添加到我的样式中 em>,像这样:
<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="" 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="" 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 文件中的字形,可能带有绝对/相对路径,并将其用作 backgound-image url(),而无需定义一个额外的类,但只是将样式应用于我想要的类(在本例中为 my-button)。类似的东西(只是一个例子,我不知道正确的 URI 格式应该是什么):
.my-button
background-image: url(binaries/icons/my-fontello-font.svg?font=fontello#my-icon
这将是完美的:
加载字形图标时只有一个 HTTP 请求 为每个图标跳过一个类的定义(如果我有 200 个图标怎么办??)并直接使用它们有没有办法做到这一点?
【问题讨论】:
你试过了吗? css-tricks.com/svg-sprites-use-better-icon-fonts 【参考方案1】:我已经对该主题进行了简短的挖掘(正在搜索它并找到了那个问题)。据我所知,可能有办法做到这一点,但它缺乏浏览器支持。
我想到的是有一个小解析器(就像一个简单的 grunt 任务),它将字形更改为视图和路径,然后按照此处所述使用它们:https://css-tricks.com/svg-fragment-identifiers-work(背景图像方法)。
希望这可以引导您到某个地方。我可能会更深入地挖掘这个主题,但到目前为止,似乎只有这种方式才有可能(所以不是在每个浏览器中)。
【讨论】:
你是对的。我也发现了这种方法,即使它有优势(大公司使用这种方法),我个人也不太喜欢这种方法。最后我放弃了创建多个类或使用一些智能 SCSS mixin。而 atm 我只是将在 SVG 中定义的图标的名称传递给我的 mixin(因此,没有不清楚的 html 实体,或者在我的 SVG 图标集的发布之间发生变化的字符)。现在是一个适合我需要的公平解决方案(可以快速维护的东西,支持 CSS 彩色图标)。但我希望进一步支持在 SVG-XML 文件中查询单个字形的方法。以上是关于使用 <glyph> 作为“背景图像”,取自单个 SVG的主要内容,如果未能解决你的问题,请参考以下文章