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>

Answer 1

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>

Answer 2

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"