How can I put a text inside and centered of that SVG path

I wanna make a design similar to that one, but my textPath only goes around the path, not inside.
I tried using text-anchor, dominant-baseline, and for some reason the x and y attributes wont work.
heres the svg code:

<svg>
<path
          class="ativo"
          d="m 404.84257,488.18114 -0.16,-1.33 -1.42,-0.57 -0.73,-3.3 0.4,-1.95 -2.14,-0.58 -0.76,0.17 -1.1,2.77 -0.66,0.85 -1.06,-0.53 -0.35,-0.78 0.69,-3.3 0.89,-0.66 0.14,-0.4 -1.61,-1.27 -1.59,-0.13 -1.58,0.19 -0.5,-0.38 -3.41,0.53 -2.38,0.12 -1.01,-0.21 -0.6,-0.39 -0.33,-2.04 1.28,-2.12 0.25,-1.05 -0.25,-0.44 -0.6,-0.3 -0.92,-1.97 0.06,-0.89 -0.5,-0.68 -0.67,-0.29 -1.21,-1.14 -1.49,-3.01 0.36,-0.55 0.08,-1.76 -1.3,-1.52 -0.38,-1.84 0.17,-0.81 0.39,-0.58 -0.02,-2.74 -0.89,-1.76 -3.59,-2.83 -1.13,-1.55 -2.97,0.86 -5.31,-0.13 -0.66,-0.54 -1.65,-0.14 -0.42,0.34 -1.72,-0.07 -0.72,-1.32 -0.63,-0.51 -3.51,-0.8 -1.75,-0.84 -0.78,-1 -2.58,0.01 -1.07,0.54 -1.32,-0.13 -2.64,-1.09 -2.53,-0.46 -1.48,-0.79 -1.17,-0.29 -0.73,0.37 -0.34,0.6 -1.21,0.62 -3.28,-0.29 -4.01,0.11 -3.83,-0.65 -3.25,2.29 0,0 0.84,-1.08 0.73,-1.54 1.26,-1.14 7.56,-4.54 1.95,-1.87 1.26,-2.43 1.73,-1.69 0.4,-1.21 1.44,-1.03 0.28,-1.22 -0.35,-0.84 2,-2.26 1.21,-2.34 0.07,-0.94 -0.31,-1.93 0.23,-0.39 0.96,-0.52 2.6,-3.64 0.16,-2.93 0.62,-1.68 1.01,-0.3 0.73,-0.64 1.99,-2.68 1.22,-1.02 0.47,-0.23 1.31,-0.04 1.5,-0.78 0.28,-0.4 0.4,-2.46 0,0 1.22,-1.13 2.15,-1.11 1.92,-0.37 1.43,-1.69 1.5,-0.61 0.75,0.14 1.73,1.55 2.55,0.08 4.29,0.96 1.67,-0.36 1.62,0.22 2,-0.59 2.18,1.42 1.67,0.79 -0.13,0.92 0.33,1.42 1.21,2.09 0.63,0.03 0.54,-0.32 0.67,-0.94 0.41,-1.13 0.26,-0.19 0.55,0.05 0.36,0.39 0.25,0.96 0.01,2.78 1.2,0.53 0.41,-0.45 -0.27,-2.54 0.49,-1.19 0.45,-0.48 8.18,-0.67 1.01,-1.25 1.5,1.46 1.12,0.43 2.78,-0.69 0.44,-0.99 -0.2,-0.46 0.31,-0.61 2.38,-0.11 1.66,0.78 0.85,-0.64 1.31,-0.29 3.26,3.35 0.2,1.04 -0.57,1.01 -0.29,2.37 0.58,0.61 1.89,1.21 0.4,1.55 -0.06,0.56 -1.52,2.03 -0.18,1.94 0.79,0.74 0.31,0.61 0.37,2.21 1.3,1.8 0.83,1.99 -0.03,0.85 1.61,-0.05 0.78,-0.31 0.28,-0.36 1,-0.05 3.7,1.32 0.23,0.37 -0.05,1.27 -0.7,2.18 -1.86,2.72 0.26,2.94 -0.19,3.45 -0.53,1.56 0.72,1.6 1.78,1.24 1.81,0.83 0.51,1.72 -1.21,0.7 2.02,3.31 1.13,0.25 2.01,-0.24 0.18,0.53 3.62,-1 0.56,0.42 1.31,-0.32 0.75,-0.98 0.05,-0.84 -0.24,-0.24 0.17,-2.3 1.19,-0.33 0.09,0.35 -0.35,0.49 0.01,0.48 2.34,0.08 2.39,-0.25 1.79,-0.67 1.23,-1.24 1.93,-1.02 2.21,-0.22 1.24,-0.73 0,0 1.27,0.54 0.56,1.17 1.23,1.59 1.77,0.39 3.15,-0.53 1.7,0.01 0.75,1.64 -1.65,2.15 -1.5,0.71 -2.77,0.36 -0.5,-0.15 -2.35,1.01 -1.09,1.15 -1.09,3.5 0.05,0.41 1.63,1.73 0.48,0.26 0,0 -0.06,0.2 -1.69,0.42 -1.06,-0.82 -1.48,1.11 -0.43,0.65 0.27,0.22 -0.76,0.64 -3.22,1.55 -2.25,0.7 -0.28,0.44 0.04,0.96 0.5,1.55 -0.32,0.42 -1.4,0.26 -0.7,-0.64 -1.34,-0.29 -3.12,-0.5 -0.86,0.15 -1.32,0.34 -1.73,0.82 -0.5,0.51 -1.21,2.15 -1.31,0.57 -0.5,-0.12 0.58,-0.47 -0.48,-1.22 -1.17,-0.85 -0.83,1.23 0.26,0.75 -0.3,0.61 -7.62,4.24 -0.95,0.82 -0.31,1.16 -3.27,3 -3.25,1.95 -1.92,0.53 -4.5,3.21 -2.33,1.96 -0.67,0.08 -0.44,0.62 0.9,0.43 0.66,0.06 0.93,-0.36 0,0.76 -0.62,1.31 -1.32,0.85 -1.06,1.48 z m 44.31,-23.01 -1.54,-0.65 -1.16,0.18 -0.49,-0.38 0.1,-0.78 0.95,-0.65 1.09,-1.85 0.72,0.25 0.66,0.65 0.13,2.91 -0.46,0.32 z"
          title="São Paulo"
          id="SP"
        />
        <text style="font-size: 45px">
          <textPath href="#SP">São Paulo</textPath>
        </text>
</svg>

Solution

wrap all path in a native Web Component (JSWC)
process all path[title]
calculate path BBox
add a "textline" (red for demo only, make it transparent)
position the text
optional x,y offsets on the path

customElements.define("country-names", class extends HTMLElement {
  connectedCallback() {
    setTimeout(() => { // make sure all DOM is parsed
      this.svg = this.querySelector(`svg`);
      this.svg.querySelectorAll("path[title]")
              .forEach(path=>this.labelPath(path));
    })
  }
  labelPath(path){
      path.setAttribute("fill","none");
      path.setAttribute("stroke","black");
      let { x, y, width, height } = path.getBBox();
      let title   = path.getAttribute("title");
      let xoffset = ~~(path.getAttribute("x") || 0);
      let yoffset = ~~(path.getAttribute("y") || 1);
      let id   = "p" + Math.random() * 1e18; // create a unique id
      let line = `<path id="${id}" 
                        d="m${x+xoffset} ${y+yoffset+height/2}h${width}" stroke="red"/>`;
      this.svg.insertAdjacentHTML("beforeend", line + `
        <text style="font-size: 15px">
        <textPath startoffset="50%" text-anchor="middle" 
                  dominant-baseline="middle" href="#${id}">
          ${title}</textPath>
        </text>`);
  }
});

<country-names style="height:180px">
  <svg viewBox="0 0 260 100" style="background:pink">
    <path title="center" d="m160 10h80v80h-80v-80"/>
    <path x="-5" y="-10" title="São Paulo" d="m100 100 0-1-1-1-1-3 0-2-2-1-1 0-1 3-1 1-1-1 0-1 1-3 1-1 0 0-2-1-2 0-2 0-1 0-3 1-2 0-1 0-1 0 0-2 1-2 0-1 0 0-1 0-1-2 0-1-1-1-1 0-1-1-2-3 0-1 0-2-1-2 0-2 0-1 0-1 0-3-1-2-4-3-1-2-3 1-5 0-1-1-2 0 0 0-2 0-1-1-1-1-4-1-2-1-1-1-3 0-1 1-1 0-3-1-3-1-2-1-1 0-1 0 0 1-1 1-3 0-4 0-4-1-3 2 0 0 1-1 1-2 1-1 8-5 2-2 1-2 2-2 0-1 1-1 0-1 0-1 2-2 1-2 0-1 0-2 0 0 1-1 3-4 0-3 1-2 1 0 1-1 2-3 1-1 1 0 1 0 2-1 0 0 0-3 0 0 1-1 2-1 2 0 1-2 2-1 1 0 2 2 3 0 4 1 2 0 2 0 2-1 2 1 2 1 0 1 0 1 1 2 1 0 1 0 1-1 0-1 0 0 1 0 0 0 0 1 0 3 1 1 0-1 0-3 1-1 1-1 8-1 1-1 2 2 1 0 3-1 0-1 0-1 0-1 2 0 2 1 1-1 1 0 3 3 0 1-1 1 0 2 1 1 2 1 0 2 0 1-2 2 0 2 1 1 0 1 0 2 1 2 1 2 0 1 2 0 1 0 0 0 1 0 4 1 0 0 0 1-1 2-2 3 0 3 0 4-1 2 1 2 2 1 2 1 1 2-1 1 2 3 1 0 2 0 0 1 4-1 1 0 1 0 1-1 0-1 0 0 0-2 1 0 0 0 0 1 0 1 2 0 2 0 2-1 1-1 2-1 2 0 1-1 0 0 1 1 1 1 1 2 2 0 3-1 2 0 1 2-2 2-2 1-3 0-1 0-2 1-1 1-1 4 0 0 2 2 1 0 0 0 0 0-2 0-1-1-2 1 0 1 0 0-1 1-3 2-2 1 0 0 0 1 1 2 0 0-1 0-1-1-1 0-3-1-1 0-1 0-2 1-1 1-1 2-1 1-1 0 1-1-1-1-1-1-1 1 0 1 0 1-8 4-1 1 0 1-3 3-3 2-2 1-5 3-2 2-1 0 0 1 1 0 1 0 1 0 0 1-1 1-1 1-1 2zm44-23-2-1-1 0-1 0 0-1 1-1 1-2 1 0 1 1 0 3-1 0z"/>
  </svg>
</country-names>