如何在CSS中使用SVG符号?

前端之家收集整理的这篇文章主要介绍了如何在CSS中使用SVG符号?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于我来说, Using symbols in SVG formats似乎是个好主意,所以你只能加载一个SVG文件,并将其用作一个spritemap。

但是,直接包含< svg>< / svg>标签在我的html的图标,因为他们只是演示文稿,应该添加到我的CSS。

有没有办法从svg中添加一个符号:在我的CSS中的伪元素之后?

解决方法

您可以以CSS的方式引用片段(片段必须具有要标识的ID):
.element {
background-image: url('vector.svg#fragment');
}

您还可以通过使用viewBox进行剪裁来显示特定区域:

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

在这里,您可以阅读有关此方法的更多信息:
http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/

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

猜你在找的CSS相关文章