CSS :before et :after Les pseudo-éléments peuvent-ils styliser les SVG en ligne ?

Style des SVG en ligne avec CSS :before et :after

Utilisation des pseudo-éléments CSS :before et :after pour styliser les éléments SVG en ligne s'est avéré être un défi. Malgré son potentiel à améliorer l'impact visuel des SVG, cette approche se heurte à des limites dues à la nature des SVG en tant qu'éléments remplacés.

Les pseudo-éléments :before et :after sont principalement utilisés pour générer du contenu au sein d'un élément, ce qui entraîne le remplacement d'éléments anonymes. Cependant, les SVG sont déjà des éléments remplacés, ce qui rend difficile l'injection de contenu supplémentaire à l'aide du contenu généré.

L'exemple fourni (http://jsfiddle.net/wD56Q/) montre le problème où le style défini avec :before ne parvient pas à affecter le SVG. En effet, les SVG, comme les images, ne peuvent pas contenir de contenu généré. Ils sont considérés comme atomiques et ne peuvent pas être affectés par les propriétés CSS qui altèrent leur contenu interne.

Pour surmonter cette limitation, on pourrait explorer des solutions expérimentales comme CSS :outside, un pseudo-élément qui place le contenu généré en dehors de l'élément remplacé. plutôt qu'à l'intérieur. Cependant, cette approche est encore en développement et pourrait ne pas être largement prise en charge.

En conclusion, le style direct des éléments SVG en ligne à l'aide de CSS :before et :after n'est actuellement pas pris en charge. Les SVG étant des éléments remplacés, ils ne peuvent pas contenir de contenu généré. D'autres approches, comme CSS :outside, pourraient apporter des solutions potentielles à l'avenir, mais leur adoption reste incertaine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!