Reputation: 463
I have converted image to svg and get the path vector like below
<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>
What i want is to give fill the path with color any color but when i use fill it only change the color of borders not the inner color of complete path node. I tried
style="fill:green;background-color:red"
but not working only changing border not inner? Here is jsfiddle link Link to example can any body convert and fill the path with color?
Upvotes: 5
Views: 8903
Reputation: 482
The thing is that your SVG
doesn't have any "inner". Your SVG
is actually what you call a border. You can't set a color for what's inside because it's not a part of your SVG
.
There's specified a "hole" in your image. That's the path in your code starting with m1007
and ending with -251z
- due to specification: "The M indicates a moveto, ... and the z indicates a closepath)".. If you remove that part you'll have the whole shape w/o the gap inside.
https://jsfiddle.net/norin89/qhqa4kyq/4/
Upvotes: 11