:after, svg et couleur css

Bonjour,

J'essaie (enfin ) d'utiliser svg, et je bloque sur un souci...

Le cas est tout simple: est-il possible de colorer un svg appelé via :after?

a[href^="http://"]:after {
	content: " "url(../img/external-link.svg);
	color: #fc0;
}

Mon svg s'affiche bien, mais reste de la même couleur que celle définie dans mon fichier Illustrator...

Merci pour vos pistes et remarques

Bonjour,

Je pense qu'on svg inclus de cette façon est considérée comme une balise <img /> et non comme du svg "déssiné" et qu'il n'est pas possible d'agir directement sur la couleur de l'objet... il faudrait soit que tu ai un js qui transforme ton image en script svg soit que tu inclus toit même le script svg.


Article Alsa : http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html
Post StackOverflow sur le sujet : http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement

Bonjour _laurent,

J'avais déjà consulté les deux liens que tu mentionnes
L'article de Gili est complet et intéressant, je compte bien m'en inspirer.
Pour l'instant, je laisse de côté la solution proposée par Drew Baker sur StackOverflow: je ne souhaite pas ajouter de .js dans mon projet.

En tout cas, merci d'avoir pris le temps de me répondre.

Avec plaisir. Je suis tombé sur le même problème il y a quelques jours en fait et j'ai été obligé de faire 2 svg a cause d'un changement de couleur... c'est pas classe

Les alternatives que j'ai trouvé étaient de passer le svg en code (comme je l'ai mentionné dans ma première réponse) ou bien en font-face mais là ça implique qu'il n'y ai qu'une seule et même couleur pour toute la forme. D'ailleurs en écrivant ça je me dis que ça peut être un problème de modifier la couleur d'un svg importé comme une image : si le svg est composé de plusieurs formes de couleurs différentes...

Bref, bon courage