comment changer la couleur de remplissage svg lorsqu'il est utilisé comme base-64 données d'image de fond?
Je suis en utilisant SVG pour un projet, chargé en css comme ceci:
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2238px%22%20viewBox%3D%220%200%2022%2038%22%20enable-background%3D%22new%200%200%2022%2038%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.style0%7Bfill%3A%09%23f47216%3B%7D%3C/style%3E%3Cpath%20d%3D%22M2.643%2038c-0.64%200-1.282-0.231-1.79-0.699c-1.074-0.988-1.143-2.661-0.154-3.735l13.13-14.258L0.664%204.4%20c-0.967-1.094-0.865-2.765%200.229-3.732s2.765-0.864%203.7%200.229L19.37%2017.592c0.898%201%200.9%202.545-0.035%203.542L4.588%2037.1%20C4.067%2037.7%203.4%2038%202.6%2038z%22%20class%3D%22style0%22/%3E%3C/svg%3E');
J'ai quelques placez les états à mettre en évidence en changeant la couleur de fond de la flèche.
Pour l'instant, je suis simplement en appliquant les mêmes données svg avec la portion du remplissage (fill%3A%09%23f47216%3B%7D%3C où f47216 est la couleur) a changé avec le droit/nouvelle couleur. Fonctionne assez bien. Cependant, j'aimerais savoir si il y a peut-être une autre méthode plus intelligente.
source d'informationauteur Stratboy
Vous devez vous connecter pour publier un commentaire.
Base64 pour:
à l'aide d'un outil comme http://www.base64encode.org/
Cela ne veut pas répondre directement à votre question, mais il n'laissez-nous effectuer les opérations suivantes. Nous pouvons maintenant tester pour voir si:
de travail, ou utiliser
qui semble inefficace pour moi parce que nous sommes obligés de répliquer un lot de la même information pour le hover quand tout ce que nous voulons changer, c'est la couleur.
exemple de travail
Ou si vous voulez le faire de façon dynamique à essayer :
Violon Ici
Utilisation filtre propriété de feuille de style CSS.
Pour moi, j'ai voulu changer la couleur de l'icône, à blanc sur le vol Stationnaire:
Une autre approche de ce que j'ai trouvé qui fonctionne bien est avec PHP à l'aide d'un
GET
param pour définir la couleur de remplissage.Exemple
CSS
PHP