css - 如何在 CSS 中使用 SVG 符号？

Question

Using symbols in SVG formats对我来说似乎是个好主意，因此您只能加载一个 SVG 文件，并将其用作一种 spritemap。

虽然我觉得直接包含 <svg></svg> 是不对的在我的 html 中用于图标的标记，因为它们仅用于演示，应添加到我的 CSS 中。

有没有办法从 :after 中的 svg 添加符号？我的 CSS 中的伪元素？

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/

另一种方法可能是以图标字体创建所有符号。