Discussion :

[itak media]

Bonjour,

lorsque j'utilise le balisage habituel :

background-image: url('data:image/svg+xml,<svg fill="MediumTurquoise" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m511.986 341.999v-168c0-35.841-29.157-65-64.996-65h-56.996v-14c0-35.841-29.157-65-64.996-65h-259.983c-35.839 0-64.996 29.159-64.996 65v168c0 28.688 18.679 53.094 44.514 61.694-17.323 etc... </svg>

j'arrive à passer la valeur de fill. Ici "MediuMTurquoise".

En revanche, avec un balisage du type :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

background-image: url('/sites/default/files/media-images/facebook.svg');

qui affiche pourtant très bien le SVG grâce à

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
	display: inline-block;
	content: "";
	background-repeat: no-repeat;
	-webkit-background-size: 1.5rem 1.5rem;
	background-size: 1.5rem 1.5rem;
	background-position: 0 0.25rem;
	width: 1.5rem;
	height: 1.8rem;
	margin-right: 0.5em;

il m'est impossible de changer la valeur FILL via CSS.

Avez-vous une idée du problème ?
De sa solution ?

[plugin and play]

Hello,

Il est impossible de modifier un svg via le CSS.

Ouvres ton fichier svg dans ton editeur de code et modifie la valeur du fill (sauvegarde en svg).

tu pourras alors appeler ton image en css comme ça: background-image: url('/sites/default/files/media-images/facebook.svg');

[itak media]

Il est impossible de modifier un svg via le CSS.

Merci de ta réponse. C'est bien ce qui me semblait, malgré certains tutos trouvés sur le web... qui ne marchent pas.

[Doksuri]

Il est impossible de modifier un svg via le CSS.

Ouvres ton fichier svg dans ton editeur de code et modifie la valeur du fill (sauvegarde en svg).

completement faux... je le fais tout le temps via CSS

@itak media, as-tu essaye de passer par le background-color (vu que tu passe ton svg en background-image)

[psychadelic]

Il est impossible de modifier un svg via le CSS.

c'est complètement faux.

exemple:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<style>
#mon-SVG {
  fill: red !important;
}
</style>

[NoSmoking]

Bonjour,
!!!!!

Il est impossible de modifier un svg via le CSS.

Je pense que plugin and play sous entendais lorsque l'on à une image, nom-fichier.svg, en background et non des données du style data:image/svg+xml que l'on peut effectivement traiter.

[plugin and play]

Je pense que plugin and play sous entendais lorsque l'on à une image, nom-fichier.svg, en background et non des données du style data:image/svg+xml que l'on peut effectivement traiter.

Tout à fait :-)

[yohooololo]

Bonjour,

On peut modifier le svg par feuille de style si celui-ci est inséré dans la page (entre des balises svg), mais pas si celui-ci est référencé comme image.