Comment donner une couleur de fond au chemin de l'élément svg?

J'ai converti l'image au format SVG et obtenir le vecteur de chemin comme ci-dessousComment donner une couleur de fond au chemin de l'élément svg?

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" 
width="122.000000pt" height="98.000000pt" viewBox="0 0 122.000000 98.000000" 
    preserveAspectRatio="xMidYMid meet"> 
<metadata> 
Created by potrace 1.14, written by Peter Selinger 2001-2017 
</metadata> 
<g transform="translate(0.000000,98.000000) scale(0.100000,-0.100000)" 
fill="#000000" stroke="none"> 

<path d="M93 873 c-7 -3 -6 -653 0 -660 5 -4 889 -185 892 -181 1 1 35 69 74 
151 l71 147 0 273 0 272 -515 0 c-283 0 -518 -1 -522 -2z m1007 -284 l0 -251 
-66 -139 c-59 -122 -70 -138 -88 -134 -12 3 -106 23 -211 46 -104 22 -219 47 
-255 54 -36 8 -85 21 -109 30 -24 8 -56 15 -70 15 -15 0 -49 7 -75 16 -26 9 
-58 14 -71 12 -15 -3 -26 0 -29 9 -4 8 -6 145 -6 304 l0 289 490 0 490 0 0 
-251z" style="fill:green;background-color:red"/> 

</g> 
</svg>

Ce que je veux est de donner remplir le chemin avec la couleur toute couleur, mais quand j'utiliser le remplir changer uniquement la couleur des frontières pas intérieure couleur du nœud de chemin complet. J'ai essayé

style="fill:green;background-color:red"

mais ne fonctionne pas seule frontière intérieure changer non? Voici le lien jsfiddle Link to example Est-ce que n'importe quel corps peut convertir et remplir le chemin avec la couleur?

Source

2017-07-14 nouman arshad

La chose est que votre SVG n'a pas « intérieur ». Votre SVG est en fait ce que vous appelez une frontière. Vous ne pouvez pas définir de couleur pour ce qui est à l'intérieur car cela ne fait pas partie de votre fichier SVG. – norin89

pouvez-vous s'il vous plaît ajouter intérieur comment à toute solution comme je ne suis pas svg expert s'il vous plaît faire un peu difficile –

PEUT VOUS AJOUTER QUELQUE VALEUR OU LOGIQUE POUR LA COULEUR INTÉRIEURE –

Le fait est que votre SVG n'a aucun "intérieur". Votre SVG est en fait ce que vous appelez une frontière. Vous ne pouvez pas définir de couleur pour le contenu à l'intérieur, car il ne fait pas partie de votre SVG.

Un "trou" est spécifié dans votre image. C'est le chemin dans votre code commençant par m1007 et se terminant par -251z - en raison de la spécification: "Le M indique un moveto, ... et le z indique un chemin de fermeture)" .. Si vous supprimez cette partie, vous aurez la forme entière sans le trou à l'intérieur.

https://jsfiddle.net/norin89/qhqa4kyq/4/

Source

2017-07-14 11:22:03 norin89

Comment vous devinez que j'ai beaucoup svg similaire il y a un outil en ligne ou un raccourci pour vérifier le chemin entier donc je l'enlève du chemin .. –

Qu'est-ce que la science derrière moi donc trop corriger mes autres images..rapidement –

Je ne connais aucun outil en ligne pour le faire . Vous pouvez utiliser une application pour les graphiques vectoriels (par exemple, Adobe Illustrator ou Inkspace). Ou si vous voulez le faire directement dans le code, cherchez juste "M" et "Z" dans le "chemin". En raison de [spécification] (https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation): "Le M indique un moveto, ... et le z indique un closepath)". Vous pourriez probablement écrire 'regexp' pour enlever cette partie de' path' si vous ne voulez pas le faire automatiquement. – norin89

Comment donner une couleur de fond au chemin de l'élément svg?

Répondre

Questions connexes