首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在CSS中使用SVG符号?

如何在CSS中使用SVG符号?
EN

Stack Overflow用户
提问于 2014-08-07 21:13:59
回答 2查看 6.8K关注 0票数 20

Using symbols in SVG formats对我来说似乎是个好主意,所以你只能加载一个SVG文件,并将其用作一种spritemap。

不过,在我的html中直接包含图标的<svg></svg>标签对我来说是错误的,因为它们只是表示,应该添加到我的CSS中。

有没有办法将svg中的符号添加到我的CSS的:after伪元素中?

EN

回答 2

Stack Overflow用户

发布于 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/

另一种方法是用图标字体创建所有的符号。

票数 6
EN

Stack Overflow用户

发布于 2014-08-07 21:42:55

正如Blazemonger在评论中提到的,你可以在after元素的content中给出它。

但是,如果您将其设置为afterbackground,则可以更好地控制其sizeposition和背景图像可以具有的任何其他属性

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 DEMOurl提供。

阅读有关如何将SVG添加到页面here的更多信息

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25183533

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档