如何在元素的伪元素之前添加svg作为内容？[复制]

Question

我试图在pseudo元素之前的：的内容中使用svg。

为此，我提出了以下问题：有没有办法将SVG用作伪元素的内容：before或：after，但我无法使其工作。

我只有一个简单的SVG：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

以下是我尝试过的：

示例1：在内容属性上插入svg

css lang-css prettyprint-override">#square{
   background-color: green;
   width: 100px;
   height: 100px;
}

#square:before{
   display: block;
   content: url("data:image/svg+xml;charset=UTF-8,<svg height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>");
   background-size: 28px 28px;
   height: 28px;
   width: 28px;
}

<div id="square"></div>

示例2：使用base64编码

#square{
   background-color: green;
   width: 100px;
   height: 100px;
}

#square:before{
   display: block;
   content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0icmVkIiAvPjwvc3ZnPg==");
   background-size: 28px 28px;
   height: 28px;
   width: 28px;
}

<div id="square"></div>

正如你所看到的，这些例子中的任何一个都不起作用，所以我确信我遗漏了一些东西。

我做错了什么？

提前感谢！




Answer 1

似乎SVG标签需要更多属性。

#square{
   background-color: green;
   width: 100px;
   height: 100px;
}

#square:before{
   display: block;
   content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>");
   background-size: 28px 28px;
   height: 28px;
   width: 28px;
}

<div id="square"></div>