web-dev-qa-db-fra.com

CSS: avant sur SVG en ligne

Mise à jour
Merci à porneL d'avoir souligné la relation entre le contenu généré et les éléments remplacés.
J'ai trouvé cet article qui traite de ce sujet même:
http://red-team-design.com/css-generated-content-replaced-elements/

Chose intéressante, un document du W3C intitulé "Module de contenu généré et remplacé par CSS3" (il y a 11 ans!) Définit le pseudo-élément :outside, qui pourrait offrir une solution à l'utilisation du contenu généré avec des éléments remplacés, en plaçant le contenu généré à l'extérieur de l'élément remplacé, au lieu d'essayer de l'ajouter à l'intérieur.


Question d'origine

Existe-t-il un moyen de styliser un élément SVG en ligne en utilisant le CSS :before et :after pseudo-éléments?

Exemple: http://jsfiddle.net/wD56Q/

Dans cet exemple, le style défini avec :before n'est pas appliqué au SVG (testé dans Firefox 29 et Chrome 35). S'agit-il de la propriété content dans :before? Pour ce que j'ai lu, il essaie d'insérer un contenu généré dans l'élément .. est-ce ce qui échoue avec SVG?


Documentation connexe de MDN:

:: avant (: avant)

:: before crée un pseudo-élément qui est le premier enfant de l'élément correspondant. Souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété content. Cet élément est en ligne par défaut.

contenu

La propriété CSS de contenu est utilisée avec les pseudo-éléments :: avant et :: après pour générer du contenu dans un élément. Les objets insérés à l'aide de la propriété content sont des éléments remplacés de manière anonyme.


Le code dans l'exemple:

   svg {
     left: 50px;
     position: absolute;
     top: 50px;
   }
   svg circle {
     fill: green;
   }
   svg:before {
     border: 2px solid blue;
     content: "";
     height: 100px;
     margin: -6px;
     padding: 4px;
     position: absolute;
     width: 100px;
     z-index: -1;
   }
   div {
     background-color: green;
     height: 100px;
     left: 200px;
     position: absolute;
     top: 150px;
     width: 100px;
   }
   div:before {
     border: 2px solid blue;
     content: "";
     height: 100px;
     margin: -6px;
     padding: 4px;
     position: absolute;
     width: 100px;
     z-index: -1;
   }
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

<div></div>
csshtml5svgpseudo-element
41
danbal

Non, le SVG en ligne est traité comme une image et les images sont des éléments remplacés qui ne sont pas autorisés à avoir du contenu généré .

À strictement parler, je pense que ce n'est pas défini. CSS 2.1 ne parle que des "images, documents intégrés et applets" en général et Le standard HTML le définit pour les images, mais pas explicitement SVG.

39
Kornel