IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

svg, pas possible de changer couleur


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Février 2020
    Messages
    11
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Février 2020
    Messages : 11
    Par défaut svg, pas possible de changer couleur
    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 ?

  2. #2
    Membre éprouvé
    Homme Profil pro
    Agence digitale
    Inscrit en
    Avril 2020
    Messages
    69
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Agence digitale
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2020
    Messages : 69
    Par défaut
    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');

  3. #3
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Février 2020
    Messages
    11
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Février 2020
    Messages : 11
    Par défaut
    Citation Envoyé par plugin and play Voir le message
    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.

  4. #4
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 495
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 495
    Par défaut
    Citation Envoyé par plugin and play Voir le message
    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)
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  5. #5
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    Citation Envoyé par plugin and play Voir le message
    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>

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    !!!!!
    Citation Envoyé par plugin and play
    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.

  7. #7
    Membre éprouvé
    Homme Profil pro
    Agence digitale
    Inscrit en
    Avril 2020
    Messages
    69
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Agence digitale
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2020
    Messages : 69
    Par défaut
    Citation Envoyé par NoSmoking
    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 :-)

  8. #8
    Invité de passage
    Homme Profil pro
    Webdisgner et intégrateur
    Inscrit en
    Mai 2023
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdisgner et intégrateur

    Informations forums :
    Inscription : Mai 2023
    Messages : 1
    Par défaut
    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.

Discussions similaires

  1. [VB.net] Changer couleur ligne DataGrid
    Par bguihal dans le forum Windows Forms
    Réponses: 7
    Dernier message: 22/07/2016, 06h54
  2. Réponses: 2
    Dernier message: 22/09/2013, 15h57
  3. Réponses: 18
    Dernier message: 06/01/2008, 21h47
  4. Réponses: 4
    Dernier message: 21/08/2007, 20h37
  5. changer couleur d'une "case" selon clique
    Par Jéjé2reims dans le forum MFC
    Réponses: 4
    Dernier message: 05/02/2004, 12h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo