我想使用::before在一些选定的元素之前放置SVG图像:
#mydiv::before {
content: '<svg ... code here</svg>';
display: block;
width: 22px;
height: 10px;
margin: 10px 5px 0 10px;
}
上面的代码只显示明文。 我检查了规范，似乎有一些限制什么内容可以。CSS内容属性解决方案是可取的。
当前回答
.myDiv {
display: flex;
align-items: center;
}
.myDiv:before {
display: inline-block;
content: url(./dog.svg);
margin-right: 15px;
width: 10px;
}
其他回答
.myDiv {
display: flex;
align-items: center;
}
.myDiv:before {
display: inline-block;
content: url(./dog.svg);
margin-right: 15px;
width: 10px;
}
小心其他答案在IE中都有问题。
让我们有这种情况-按钮与前置图标。所有浏览器都能正确地处理这一点，但IE采用元素的宽度并缩放之前的内容以适应它。JSFiddle
#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
content: url("data:url or /standard/url.svg");
}
解决方案是将size设置为element之前，并将其留在原来的位置:
#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
content: url("data:url or /standard/url.svg");
display: inline-block;
width: 16px; //only one size is alright, IE scales uniformly to fit it
}
background-image + background-size解决方案也可以，但有点不方便，因为您必须指定两次相同的大小。
IE11的结果是:
是的，你可以!刚刚测试了这个，它工作得很好，这是了不起的!
#test::before {
content: url(path/to/your.svg);
width: 200px;
height: 200px;
}
或者如果你喜欢把SVG直接放在CSS中:
#测试::{之前 content: url("data:image/svg+xml，%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E "); 宽度:200 px; 身高:200 px; ｝ < div id = "测试" > < / div >
SVG URL编码器来格式化您自己的SVG，如下所示。
使用一个空内容的背景蒙版图像，你可以在css中控制颜色:(不要忘记你喜欢的位置，宽度和高度)…!
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';
你可以使用url() CSS函数。
#mydiv::before {
content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
display: block;
width: 22px;
height: 10px;
margin: 10px 5px 0 10px;
}
确保您的SVG不包含任何#符号。使用像这样的编码器。
