如何在元素的 :before 伪元素上添加 svg 作为内容? [英] How can I add a svg as content on :before pseudo element of an element?

问题描述

我试图在 :before 伪元素的内容中使用 svg.

I am trying to use a svg inside content of :before pseudo element.

为此，我关注这个问题:有没有办法使用 SVG 作为伪元素中的内容 :before 或 :after 但我不能让它工作.

For this purpose, I am following this question: Is there a way to use SVG as content in a pseudo element :before or :after but I cannot make it work.

我只有一个简单的 SVG:

I just have a simple SVG:

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

这是我尝试过的:

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

#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>

如您所见，这些示例中的任何一个都不起作用，所以我确信我遗漏了一些东西.

As you can see, any of those examples does not work so I am sure that I am missing something.

我做错了什么?

提前致谢！

推荐答案

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

Seems like the SVG tag needed more attributes.

#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>

这篇关于如何在元素的 :before 伪元素上添加 svg 作为内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！