Je ne peux pas changer la couleur de remplissage d'un SVG Sprite
J'ai cette stylo où j'ai fait un exemple de la SVG Sprites Technique:
<svg xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">
<symbol viewBox="0 0 64 64" id="circle">
<title>circle</title>
<path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/>
</symbol>
<symbol viewBox="0 0 56.983 64.804" id="polyline">
<title>polyline</title>
<polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/>
</symbol>
</svg>
<svg class="circle">
<use xlink:href="#circle"></use>
</svg>
<svg class="polyline">
<use xlink:href="#polyline"></use>
</svg>
Et je veux appliquer ce avec CSS:
.circle {
fill: #f00;
}
.polyline {
fill: #00f;
}
Mon problème est que je ne suis pas en mesure de modifier la couleur de fond de l'élément ajouté à la spritesheet. J'ai cherché de l'information sur la façon de le faire correctement et je pense que mon approche c'est correct, mais il semble que ce n'est pas comme ça.
Dans cette autre stylo, écrit dans le même sens, je pense, fonctionne bien. Ce que je fais mal?
Désolé pour mon anglais, si j'ai fait une erreur, ce n'est pas ma langue maternelle.
OriginalL'auteur Miguel Morera | 2015-08-12
Vous devez vous connecter pour publier un commentaire.
Vous devez supprimer internes style de remplir bien et ne s'appliquent propriété css. De toute façon changer de remplissage de la propriété de svg à l'aide de javascript DOM.
Merci beaucoup! Maintenant, c'est tellement évident!
OriginalL'auteur Sachin Kanungo
Ici est un exemple: http://codepen.io/anon/pen/NqmrOR
Le problème était le
fill="#1D1D1B"
attributs placés directement sur les éléments SVG.NOTE: à l'Aide de CSS sélecteurs de classe sur les éléments SVG, tandis que les prises en charge dans les plus up-to-date de navigateurs, n'est pas universellement pris en charge. Par programme pour appliquer des styles aux éléments SVG en JS eux-mêmes est en fait une meilleure prise en charge.
OriginalL'auteur blcook223
Une autre option que j'aime, c'est le css
filter
propriété.Basé sur Comment transformer le noir en toute couleur donnée en utilisant uniquement les filtres CSS vous pouvez régler le filtre pour modifier le format svg est la couleur de ce que vous voulez.
Plus d'infos: https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6
OriginalL'auteur Bogdan M.