我想使用::before在一些选定的元素之前放置SVG图像:
#mydiv::before {
content: '<svg ... code here</svg>';
display: block;
width: 22px;
height: 10px;
margin: 10px 5px 0 10px;
}
上面的代码只显示明文。 我检查了规范，似乎有一些限制什么内容可以。CSS内容属性解决方案是可取的。
当前回答
虽然这是很多年前的事了，但我还是想分享一下。
上面的答案是正确的，您可以直接将编码后的svg字符串附加到css content属性中。对于那些与URL有任何问题的人来说，可能是由于空格和字符无效，在这种情况下，将您解码的SVG代码粘贴到: https://mothereff.in/url
使用编码后的SVG URL应该可以正常工作。 错误和正确的例子:
#incorrect::before {
content: url(
data:image/svg + xml,
<svgid="Layer_1"data-name="Layer 1"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 15.37 188.41"><defs><style>.cls-1{fill:#aeadad;}</style></defs><circleclass="cls-1"cx="7.69"cy="7.69"r="7.69"/><rectclass="cls-1"x="6.69"y="27.72"width="2"height="160.69"/></svg>
);
}
#correct::before {
content: url(data:image/svg+xml,%0A%3Csvg%20id%3D%22Layer%5f1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.37%20188.41%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aeadad%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%227.69%22%20cy%3D%227.69%22%20r%3D%227.69%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226.69%22%20y%3D%2227.72%22%20width%3D%222%22%20height%3D%22160.69%22%2F%3E%3C%2Fsvg%3E%0A);
}
其他回答
为了进一步扩展这个主题。如果你想添加字体Awesome 5图标，你需要添加一些额外的CSS。
图标默认有svg-inline——fa和fa-w-*类。
还有像fa-lg, fa-rotate-*等修饰符类。您需要检查svg-with-js.css文件并为其找到合适的CSS。
你需要为css图标添加自己的颜色，否则它将默认为黑色，例如fill='%23f00'，其中%23编码为#。
h1::before{ /* svg-inline--fa */ display:inline-block; font-size:inherit; height:1em; overflow:visible; vertical-align:-.125em; /* fa-w-14 */ width:.875em; /* Icon */ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f00' d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'%3E%3C/path%3E%3C/svg%3E"); /* Margin */ margin-right:.75rem; } <h1>Lorem Ipsum</h1>
你可以使用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不包含任何#符号。使用像这样的编码器。
.myDiv {
display: flex;
align-items: center;
}
.myDiv:before {
display: inline-block;
content: url(./dog.svg);
margin-right: 15px;
width: 10px;
}
您可以添加SVG作为空的:after或:before的背景图像。
给你:
.anchor:before {
display: block;
content: ' ';
background-image: url('../images/anchor.svg');
background-size: 28px 28px;
height: 28px;
width: 28px;
}
使用一个空内容的背景蒙版图像，你可以在css中控制颜色:(不要忘记你喜欢的位置，宽度和高度)…!
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';
