Fill svg path background. Fill not working

Question

I need to create a speech bubble in SVG.

Unable to fill the background of the svg path. I need to fill background color to this path. Fill is only coloring the border like stroke.

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0 M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z " id="path5"/>
    <text x="15" y="32" fill="black">My Level</text>
  </g>
</svg>

Erv

Answer 1

This should work:

<path style="fill:red;fill-opacity:1;" ...>

---

Edit from comments:

Oh, now I see where is the problem. The shape is defined with empty inner space. Replace d attribute with this:

d="m 46.387286,-0.35714286 c 22.108,0 40.03,12.47499986 40.03,27.86199986 0,15.387 -17.922,27.862 -40.03,27.862 -6.931,0 -13.449,-1.227 -19.134,-3.384 -11.22,4.224 -26.53900028,12.202 -26.53900028,12.202 0,0 9.98900028,-5.655 14.10700028,-12.521 1.052,-1.755 1.668,-3.595 2.021,-5.362 -6.51,-4.955 -10.4850003,-11.553 -10.4850003,-18.797 0,-15.387 17.9220003,-27.86199986 40.0300003,-27.86199986"

Ellison

Oh, now I see where is the problem. The shape is defined with empty inner space. Replace d attribute with this: d="m 46.387286,-0.35714286 c 22.108,0 40.03,12.47499986 40.03,27.86199986 0,15.387 -17.922,27.862 -40.03,27.862 -6.931,0 -13.449,-1.227 -19.134,-3.384 -11.22,4.224 -26.53900028,12.202 -26.53900028,12.202 0,0 9.98900028,-5.655 14.10700028,-12.521 1.052,-1.755 1.668,-3.595 2.021,-5.362 -6.51,-4.955 -10.4850003,-11.553 -10.4850003,-18.797 0,-15.387 17.9220003,-27.86199986 40.0300003,-27.86199986" – Ellison

Thanks a lot ! Worked like a charm. Bit, how you manage to find this ? – Erv

I downloaded the image and opened it in Inkscape. There it was obvious. – Ellison

@Ellison How do I modify the right d attribute with Inkscape? – Viole

Answer 2

Inside the d attribute of your path you actually have 2 paths ,
the default path( d attribute ) behavior is to subtract any other shapes inside the most external shape in a recursive manner (leaving subtracted regions unfilled), look at this example.

In your case the easiest solution is to divide the paths:

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0" />
<path fill='yellow' d="M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z " id="path5"/>
    <text x="15" y="32" fill="black">My Level</text>
  </g>
</svg>

Kennie

d="m 43.762513,1.2930698 c 0,0 -22.1482,0 -33.22231,15.3006702 -11.07409982,15.30067 -11.07409982,35.70156 0,51.00224 9.71264,13.41956 33.22231,15.30067 33.22231,15.30067 l 5.29338,29.79819 11.31778,-29.79819 77.518717,0 c 0,0 22.14822,0 33.2223,-15.30067 11.07411,-15.30068 11.07411,-35.70157 0,-51.00224 C 160.04061,1.2930698 137.89239,1.2930698 137.89239,1.2930698 l -94.129877,0 z" – Erv

Answer 3

Normally what is happening in these instances is what you think is a line is actually just the body of the svg itself. If you edit the points that make up the svg you will probably find that there are a ring of points on the perimeter, with a concentric set of points just inside the perimeter. If you remove the internal ones you will see a solid shape.

Lalise

Is there a way to do this automatically though? Like "extractOuterPath" function or something like that? I mean, in case if I do not know beforehand which SVG I am dealing with so I am not able to open it in Inkscape manually to see which nodes of the path belong only to outer line to split it from the rest. – Hedgerow