Using symbols in SVG formats对我来说似乎是个好主意,所以你只能加载一个SVG文件,并将其用作一种spritemap。
不过,在我的html中直接包含图标的<svg></svg>
标签对我来说是错误的,因为它们只是表示,应该添加到我的CSS中。
有没有办法将svg中的符号添加到我的CSS的:after
伪元素中?
发布于 2015-08-16 04:51:14
你可以这样引用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/
另一种方法是用图标字体创建所有的符号。
发布于 2014-08-07 21:42:55
正如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另存为单独的文件,并将其作为background
DEMO的url
提供。
阅读有关如何将SVG添加到页面here的更多信息
https://stackoverflow.com/questions/25183533
复制相似问题