Modifier la couleur SVG

Question

Pouvez-vous changer la couleur d'une forme dans un fichier SVG? Actuellement, j'utilise un PNG que je dois créer manuellement dans Photoshop pour chaque menu différent et je me demande si je peux rendre le processus entier dynamique.

Answer 1

Vous ne pouvez pas utiliser style="background-color: #------;" (ou peut-être color:)?

EDIT: Mon erreur, celle dont vous avez besoin est de remplir, donc style="fill:#------;", et il devrait fonctionner avec n'importe quelle forme.

Answer 2

Vous pouvez utiliser un filtre de teinte ou vous pouvez corriger les couleurs comme indiqué ci-dessus. Probablement plus compatible pour changer les couleurs à ce que vous avez besoin, mais en tout cas, voici un exemple de la variante du filtre:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <filter id="h200" x="0" y="0" width="1" height="1"> 
    <feColorMatrix type="hueRotate" values="200"/> 
    </filter> 
    <image xlink:href="http://imgur.com/D9aFo.png" width="207" height="46" filter="url(#h200)"/> 
</svg> 

Vous pouvez le voir vivre here si vous utilisez un navigateur qui prend en charge les filtres svg, par exemple Opera ou Firefox.

Answer 3

@Brendan_Long est correct, tout ce dont vous avez besoin est la balise de style sur un objet chemin. Voir une démo ici: http://kemputing.com/demo/shapeDemoColour.svg

code comme ceci:

<path 
style="fill:#000080;" 
d="M 125.0,478.0 172.0,305.0 337.0,266.0 508.0,438.0 482.0,586.0 287.0,659.0 z" 
id="path2985"/> 

Faire un chemin correspondant à votre image, puis changer la couleur par programmation attaché. Vous pourriez vouloir utiliser un outil comme inkscape pour donner un coup de main.