如何在CSS中使用SVG符号？

Question

使用SVG格式的符号对我来说似乎是一个好主意,因此您只能加载一个SVG文件,并将其用作一种spritemap.

但是我感觉不对,直接将<svg></svg>标签包含在我的html图标中,因为它们只是演示文稿,应该添加到我的CSS中.

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

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/

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

Answer 2

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

但是，如果您将其设置为 a ，background您after将可以更好地控制它的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 添加到页面的方法的更多信息