如何在 :before 元素的伪元素上添加 svg 作为内容？ [复制]

Posted 2023-03-06

【中文标题】如何在 :before 元素的伪元素上添加 svg 作为内容？ [复制]

【英文标题】：How can I add a svg as content on :before pseudo element of an element? [duplicate]

【发布时间】：2018-01-23 06:31:45

【问题描述】：

我正在尝试在 :before 伪元素的内容中使用 svg。

为此，我正在关注这个问题：Is there a way to use SVG as content in a pseudo element :before or :after 但我无法让它发挥作用。

我只有一个简单的 SVG：

<svg  >
  <circle cx="50" cy="50" r="40" stroke="black" stroke- 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>

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

我做错了什么？

提前致谢！

【问题讨论】：

它可能需要是一个实际的 URL。在 chrome 中，它抱怨说它不是一个有效的 URL。将该内容制作为像 content.svg 这样的 SVG 文件，并在 URL 中链接到该文件，它应该可以工作。

@Deckerz 我尝试过使用content: url("data:image/svg+xml;charset=UTF-8,content.svg"); 和content: url("content.svg");，但这些方法都不起作用。

@Deckerz 好的，Niloct 给了我我所缺少的线索。看来我缺少强制性属性。

@LGSon 为什么这个问题是重复的？我在这里提到了另一个问题，我有一个 Niloct 指出的具体问题，所以我不认为这真的是重复的，因为在另一个问题中，有人提到了那些需要的属性。

@LGSon 没关系，现在我明白你的意思了。我没有注意到需要这些属性。感谢您解释为什么将其标记为重复 :)

【参考方案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>

【讨论】：

非常感谢！添加xmlns='http://www.w3.org/2000/svg' version='1.1' 似乎是线索！

不客气 :)