如何在CSS中使用SVG符号？

Question

在SVG格式中使用符号对我来说似乎是个好主意，这样你只需要加载一个单独的SVG文件，并将其用作一种类似于spritemap的东西。

但是，直接在我的HTML中包含<svg></svg>标签感觉不太对，因为它们仅用于呈现，应该在我的CSS中添加。

有没有办法在我的CSS的:after伪元素中添加来自SVG的符号呢？

- enyo

---

当然可以--您可以将它们存储为外部的*.svg文件，并使用.classname:after { content: url(/path/to/file.svg); }添加它们。 - Blazemonger

或者你可以将它们编码为数据URL，并嵌入到CSS文件中。 - Robert Longson

我想使用符号，而不是整个svg文件，因为我想将其用作"雪碧图"。 - enyo

看起来你最好使用<view>而不是<symbol>，请参考这里：https://css-tricks.com/svg-fragment-identifiers-work/ - Ghetolay

我非常喜欢使用SVG与:use - 以便针对较大的SVG的部分进行定位，但由于跨浏览器原因，现在必须包括整个SVG。我很喜欢fontastic这个工具。https://css-tricks.com/using-svg 图像可以只用于“演示”，我们将它们放在HTML中。 - sheriffderek

Answer 1

您可以通过以下方式在CSS中引用片段（片段必须具有ID以便于识别）：

.element {
background-image: url('vector.svg#fragment');
}

您可以通过使用viewBox对特定区域进行剪裁来显示它：

.element {
background-image: url('vector.svg#fragment(viewBox(0,0,25,25))');
}

这里您可以了解更多关于这些方法的内容：http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/。另一种方法是创建一个图标字体，包含所有符号。

- blacksunshineCoding

---

片段限制在Chrome 62中似乎目前无法正常工作。https://jsfiddle.net/b2n5tude/ - Jacob C.

OP在谈论符号。这里展示的方法是使用视图。不同的技术。 - Peter

这似乎不可能通过符号实现。如果您可以调整SVG文件，那么这个解决方案是一个很好的替代选择。 - Gerben Versluis

Answer 2

如Blazemonger在评论中提到的，你可以将其放在after元素的content中。

但是，如果你将其设置为after的background，你将对它有更多的控制，包括size、position和其他背景图像可能具有的属性。

html

<div id = "mydiv"><div>

CSS

#mydiv{
    width:500px;
    height:100px;
    background:tomato;
}

#mydiv:after{
    content:"After of #mydiv";
    width:500px;
    height:100px;
    background:url('http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg') no-repeat;
    position:absolute;
    top:200px;
    border:solid 1px tomato;
}

您可以将SVG保存为单独的文件，并将其作为url提供给background

DEMO。

了解更多关于将SVG添加到页面的方法在这里

。

- Sunil Hari

---

是的，但你必须链接整个SVG文件，而不是单个符号或def，这些可能构成OP提到的SVG文件的一部分。 - Paulie_D

我想使用符号，而不是整个SVG，因为我想将其用作“spritemap”。 - enyo

@enyo 你可以调整背景位置，将其用作精灵图。 - Sunil Hari

我知道。我想要使用符号。 - enyo