有没有办法使用SVG作为伪元素中的内容::bef矿石或::af

Question

我想使用：：before将SVG图像放置在一些选定元素之前：

#mydiv::before {
  content: '<svg ... code here</svg>';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

上面的代码只显示明文。
我检查了规范，似乎对content可以是什么有一些限制。CSScontent属性解决方案更可取。

Answer 1

您可以将SVG添加为空：后或：前的背景图像。

给你：

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

Answer 2

您可以使用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不包含任何#符号。使用像这样的编码器。

Answer 3

是的，你可以！刚刚测试了这个，它工作得很好，这太棒了！它仍然不适用于html，但适用于svg。

SVG URL编码器，用于格式化您自己的SVG，如下所示。

css lang-css prettyprint-override">#test::before {
  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 ");
  width: 200px;
  height: 200px;
}

<div id="test"></div>