web-dev-qa-db-fra.com

Comment puis-je ajouter un svg comme contenu sur: avant le pseudo-élément d'un élément?

J'essaie d'utiliser un svg dans le contenu de :before pseudo-élément.

Dans ce but, je suis en train de suivre cette question: Existe-t-il un moyen d'utiliser SVG comme contenu dans un pseudo-élément: avant ou: après mais je ne peux pas le faire fonctionner.

J'ai juste un SVG simple:

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

Et voici ce que j'ai essayé:

Exemple 1: Insertion du svg sur l'attribut content 

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

Exemple 2: avec l'encodage 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>

Comme vous pouvez le voir, aucun de ces exemples ne fonctionne donc je suis sûr que je manque quelque chose.

Qu'est ce que je fais mal?

Merci d'avance!

csscss3svg
10
Francisco Romero

Il semble que la balise SVG ait besoin de plus d'attributs.

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