I can't add labels to svg path

Question

I want to add a custom-styled label to my object. this is my code of SVG:

<svg 
            height="512"
            version="1.2"
            viewbox="0 0 1000 512"
            width="1000"
            xmlns="http://www.w3.org/2000/svg"
          >
          <!-- xlink:title="აფხაზეთის ა/რ"  -->
          
          <a  class="tip" data-title="My site" >
            <title>აფხაზეთის ა/რ</title>
                
              <path
                d="M323.6 74.5l-2.1 4.8-1.7 5.3 0.6 5.8 0.1 5.7-2.1 5.8-3 4.9-3.4 3.9-2.9 4.7-7.7 3.3-14.5 2.7-3.5 4.6 2.7 3.4 1.2 4.3 0.8 4.7 1.5 4.4 0.7 4.4-2.3 3.1-1.8 1.2-1.6 1.7-0.1 2.2 1.1 1.9 1.5 9.3-0.2 5.3 0.6 4.9 4.2 7.2 1 8.8-1.3 3.6-2.6 1.7-3.1 2.5-2.6 3.7-11.7 11.4-13.3 7.8-7.3 2.5-5.4 6.7-5.6 3.5-6 2.9-7.5-47.3-2.6-8-3.8-6.8-4.9-5.3-6.1-3.5-11.3-2.1-2.5-1.4-2.4-2.2-3.6-2-3.7-1.5-3-0.4-1.7 0.5-3 1.9-1.9 0.3-1.6-0.9-6.8-10.4-3.4-12.5-6.2-10.8-2.5-5.8-3.7 0.1-5.9 2.6-3.7-1.3-4.4-6.8-2.6-1.6-0.1-1-3.5-6.1-1-0.8-10.8-4.3-14.9-2.1-7 0.4-4.8 1.2-1.8 0.2-1.7-0.7-2.9-2.9-2.2-1.2-2.5-2.7-2.8-1.6-4.7-0.8-12-5.8-5.5-0.6-3.9 5-1.5-1.6-2.2-5.5-1.3-2.7-3.4-3.4-1.5-2.2 0.7-6.5-2.4-6-3.2-5.5-2.4-3-4.6-2.2-8.2-2.4-4.7-4.9-2.2-1-6.8-1.1-4.7-2-3.5-0.7 0.8-3.6 10.1-26.4 2-3.3 3.6-2.4 10-2.7 10.3 0 36.7 13.8 5.9 0.7 4.6-1.2 9.7-5.1 5.4-0.6 4.3 2.2 8.8 6.8 15.2 5.3 4.8 2.8 20.4 16.4 4.6 1.2 15.5-2.1 5 1.1 4.8 2.4 4.6 3.8 5.2 2.3 10.7-2.1 4.5 1.8 1.3 2 2.1 4.8 1.4 2.1 2.2 1.6 7.7 2.5 3.9 2.3 6.6 6.9 4.1 2.2 5.4 0.5 10.9-1.5 5.4 0.6 9.7 2.8 4.7 0.5 10.3-1.2 4.4 0.2 4.3 1.2 4.7 2.3 4.7 1.4 4.8 0.3 4.7-1 11.8-6.5z"
                id="AbkhaziaOccupiedByRussia"
                name="Abkhazia"
              ></path>
            </a>
            <a xlink:title="აჭარა" >
              <path
                d="M372.3 361.1l2.1 6.2-0.2 6.9-1.7 2.7-0.3 3.7 1 2.9 1.4 2.5 3.9 3.6 3.5 4.1 4.4 7 1.5 4.2-3.2 2.4-1.5 3.3-1.4 8.1-1.5 3.3-3.3 3.4-4.4 6.8-3.1 2-3.8 0.2-26.1-10.2-7.3 0.4-3.5-0.3-2.5-2.3-2.1-1.3-2.3-0.1-4.7 1.4-2.1-1-2.1-0.4-2.1 0.3-2.1 1.1-5.3 1.6-10.6-4.1-6 2.5-2.1 1.5-4.6 6.7-6 5.2-1.4 0.8-1.8-0.8-5.9-5.5-2-0.7-4.4-0.5-1.7-0.7-0.6-1.3 0.2-3.1-1.4-0.8-3.7 1.7-4.5 0.4-1.8-0.4-15.9-6.7 9.8-17.6 4.3-5.9 9-5.9 2.5-6 7-11.5 0.6-5.8 0.9-1.7 2.4-3.4 1.2-3.5 0-16.2 19.4 1 6.2 3.7 0.8 4.2 7.3 3.1 4.7 2.7 4.6 3.6 1.9-0.3 3.9-1.5 7.2-0.9 7.4 4.1 4.4 1.1 10.8-1.7 7.9-5 4.1-1.3 3.3 0.8 5.7 5.9 1.9 1 3.8 0.3z"
                id="15"
                name="Ajaria"
              ></path>
            </a>
            <a xlink:title="გურია" >
              <path
                d="M334.7 301.3l-3.4 5.3 3.6 5.3 7.3 1.3 2.8 0.8 2.4-0.8 4.6-2.9 5.3 1.3 2.9 4.7 1.9 5.9 4.3 2.6 5.3 1.6 3.8 2.8 4.1 2.1 2.9 1.7 2.9 1.5 4.8-0.4 4.5 1.3 2.2 8.7 0.3 10.1-3.8 0.1-3.3 2.2-1.3 3.6-2.5 2-3.4-0.6-3.3-1.2-7.3 0.8-3.8-0.3-1.9-1-5.7-5.9-3.3-0.8-4.1 1.3-7.9 5-10.8 1.7-4.4-1.1-7.4-4.1-7.2 0.9-3.9 1.5-1.9 0.3-4.6-3.6-4.7-2.7-7.3-3.1-0.8-4.2-6.2-3.7-19.4-1 0-0.8-1.8-12.6-0.3-4.6-0.6-2.7-6.1-10.7 3.3-5.2 0.6-3.9 2.1-5.6 9.3-1.7 9.6-0.4 18.4-3.1 8.3 2.1 7.5 5 9.5 1.3 7.9 3.9z"
                id="23"
                name="Guria"
              ></path>
            </a>
            <a  ><title>სამეგრელო-ზემო სვანეთი</title>
              <path
                d="M475.4 132.2l-4.8 1.9-5.1 7.2-3.3 3.1-0.4 6.4-2.7 4.2-4.1-0.7-9.3-3.6-10.8 1.4-16.1-7.3-2 1-1.8 1.5-4 1.8-8.7-0.3-21.1-5.2-3.7-1.7-3.7-0.1-1.9 3.4-1.5 3.7-1.6 1.3-1.8 0.4-5.6 0.4-4.7 2.7-3.6 7 8.1 7.1 16.7 9.5 6.7 7-3.9 8.4 11.3 22.7-2.9 0.1-2.7 0.8-7.4 0.5-4.6 4.6-2.2 7-2.3 2-1.5 3.1-0.1 5.9-2 4.8-10.4 12.1-6.5 10.7-1.7 5.2-2.8 3.3-1.5 8.4 0.2 10.5-3 6.3-5.9 0.6-7.9-3.9-9.5-1.3-7.5-5-8.3-2.1-18.4 3.1-9.6 0.4-9.3 1.7-2.1 5.6-0.6 3.9-3.3 5.2-4.5-7.9-3.1-3-0.7-3.8-0.3-6.9-1.2-9.1-7.9-27.6-1.6-2.7-4-4-1.1-4.8 6-2.9 5.6-3.5 5.4-6.7 7.3-2.5 13.3-7.8 11.7-11.4 2.6-3.7 3.1-2.5 2.6-1.7 1.3-3.6-1-8.8-4.2-7.2-0.6-4.9 0.2-5.3-1.5-9.3-1.1-1.9 0.1-2.2 1.6-1.7 1.8-1.2 2.3-3.1-0.7-4.4-1.5-4.4-0.8-4.7-1.2-4.3-2.7-3.4 3.5-4.6 14.5-2.7 7.7-3.3 2.9-4.7 3.4-3.9 3-4.9 2.1-5.8-0.1-5.7-0.6-5.8 1.7-5.3 2.1-4.8 4.6-1.7 25.1-2.1 10.2 1.4 8.5 5.7 3.9 4 4.3 3.4 9 5.1 2.9 0.6 2.1-0.9 4-3.8 2.6-1.2 4.7-0.1 6.9-2.2 5.9 0.2 5.7 1.5 4.2 2.7 4.2 4 4.3 2.9 12.7 4.7 0 2.7-1.1 3.4-0.5 3.3 1.4 2.1 7.3 5.2 16 15.2 2.9 1.6z"
                id="38"
                name="Samegrelo-Zemo Svaneti"
              ></path>
            </a>
            <a xlink:title="იმერეთი">
              <path
                d="M536.8 241.5l5.2 3.2 5.8 0.9 4.3-1 4.1-2.3 4.8-0.7 3.3 4.1-1.7 6.5-0.2 6.6-11.4 3.1-10 7.2-1.2 5.9 0.9 6.4-0.9 5.3-4 3.8-2 5.8-2.8 5.2-4.8 3.7-4.1 4.1-0.6 8.5-2.3 7.2-5.4 4.8-1 7.7-44.5 18.3-2.5-0.4-2.5-0.9-15.3 1.3-6.4 2.7-6.7-0.1-12.8-2.7-15.7 4-9.2-5.5-0.3-10.1-2.2-8.7-4.5-1.3-4.8 0.4-2.9-1.5-2.9-1.7-4.1-2.1-3.8-2.8-5.3-1.6-4.3-2.6-1.9-5.9-2.9-4.7-5.3-1.3-4.6 2.9-2.4 0.8-2.8-0.8-7.3-1.3-3.6-5.3 3.4-5.3 5.9-0.6 3-6.3-0.2-10.5 1.5-8.4 2.8-3.3 1.7-5.2 6.5-10.7 10.4-12.1 2-4.8 0.1-5.9 1.5-3.1 2.3-2 2.2-7 4.6-4.6 7.4-0.5 2.7-0.8 2.9-0.1 1.3 4.6 0 5.1 1.2 3.9 0.1 4.3 15.9-5.4 3.8 1.6 3.9 0.3 3.3-3.3 3.7-0.2 8.2 5.3 7.5 7.1 1.9 6.3 3.7 3 3.2 0.6 7.1 4 10.7-1 6.2-2.6 5.3-5.3 14.1-7.4 15.8 1.7 15.1-1.2 12.8 4.7z"
                id="26"
                name="Imereti"
              ></path>
            </a>
            <a xlink:title="კახეთი">
              <path
                d="M796.4 431.7l-0.4-3.4-2.2-4.9-1.1-5-2.7-4-4.7-1.3-4.8-0.3-2.6-1.8-1.1-3.9-0.8-5.4 5.1-11.8-2.9-10.7-1.1-6.4-2.6-5.3-5.7-0.7-4.9-3.6-3.3-5.4-3.9-4.4-2-5.9-4.6-2.8 3.9-4.4 4.5-2.7 8.1 5.3 12-1.7-5.4-6.5-7.3-1.9-3.5-0.3-3.4-1.2-1.4-6.2 2.3-5.5-2.6-6.3-0.5-5.7-1.7-7.7 2-4.7 2.3-11.5 2.8-4.5 3.1-10.2 3.6-4.6 3.9-3.5 3.1-0.5 2.9-1.1 1.3-7.8-1.9-8 1.5-4.8 3.3-2.9 2.3-5.2-0.5-6.1 2.1-9.2 4.8-7.2 1.7 3.7 1.5 2.4 4.9 2 6.4-0.9 12-3.6 8.5 0.2 12.5 2.2 11.6 4.6 6.1 7.3-0.5 4.8-17.1 45 1.5 4.7 4.5 2.9 6 2.8 16.3 11.5 10.4 2.7 2 2 4.3 10.5 1.5 2.2 2 1.1 2.8 0.2 3.1-2 2.2 0.2 3.7 2.9 4.7-0.7 1.5 1 1 4.3 3.6 1.7 4.6 0.1 8.7-1.8 3.9-0.4 1.4 0.4 3.9 3.2 6.5 7.8 4.2 2 8.9 0.7 3.6 2.1 3.6 4.9-5.6 11.7-3.2 5.2-6.4 7.9-2.2 1.9-2.4 1.2-3.1 0.3-6.9-1.6-3.3 0.3-2.8 3.1-1.5 6.9 0.1 10.1 1.9 8.9 4 3.4 1.3-1.1 1.8-3.3 2-0.1 0.3 1.1 3.4 6.4 1.4 9.2 1.3 4.3 2.5 3.3 7.8 5.4 1.8 0.8 3 0.8 7 6.5 14.4 6.1 7.3 4.4 2.4 5.5 2.3-0.9 1.2 0.8 1 1.7 2.9 3.3 4.7 7.2 0.9 2.9-1.7 0-1.3 1.6-0.5 5-1.1 2.5-2.9 3.1-1.4 5.3-0.8 6.8-1.3 6.4-2.8 4-3 0.5-2.8-0.8-2.9-0.3-3.1 2-1.7 3.2-0.9 3.1-1.3 2.1-3.2 0.1-2.7-1.6-4.1-5.7-2.5-2.1-8.8-2.9-3.1-1.9-8.8-8-4.3-5.4-2.4-2.3-2.6-1-11.2 0.1-3.3 0.8-7.7 4.9-3 1.1-3.6 0.3-7.1-0.8-22.1-8.1-10.4-6.3-6.1-5.3-3.6-5.7 3.3-4.1 3.4-1.2 2.2-1.2-0.2-1.2-3.5-1.4-9.7-2-21.4-8.4-4.8-4.6-2.2-2.5-2.2-0.4-4.9 1.5-3 0.3-2.3-0.5-7.2-3.7z"
                id="29"
                name="Kakheti"
              >
            </a>
    
            <circle cx="718.8" cy="284.5" id="0"></circle>
            <circle cx="908.2" cy="350.9" id="1"></circle>
            <circle cx="557" cy="368.7" id="2"></circle>
          </svg>

I want to add custom labels for different paths. I searched a lot, but I couldn't find anything helpful, nothing worked for me. for clearness I use Angular. can u give me some advice?

Answer 1

It's not entirely clear what you mean by "label". Do you mean a line of text on the map, like this?

.label {
  font-size: 16px;
  font-weight: bold;
  fill: white;
}

<svg 
  height="512"
  version="1.2"
  viewbox="0 0 1000 512"
  width="1000"
  xmlns="http://www.w3.org/2000/svg"
  >
  <!-- xlink:title="????????? ?/?"  -->
          
  <a  class="tip" data-title="My site" >
    <title>????????? ?/?</title>
                
    <path
      d="M323.6 74.5l-2.1 4.8-1.7 5.3 0.6 5.8 0.1 5.7-2.1 5.8-3 4.9-3.4 3.9-2.9 4.7-7.7 3.3-14.5 2.7-3.5 4.6 2.7 3.4 1.2 4.3 0.8 4.7 1.5 4.4 0.7 4.4-2.3 3.1-1.8 1.2-1.6 1.7-0.1 2.2 1.1 1.9 1.5 9.3-0.2 5.3 0.6 4.9 4.2 7.2 1 8.8-1.3 3.6-2.6 1.7-3.1 2.5-2.6 3.7-11.7 11.4-13.3 7.8-7.3 2.5-5.4 6.7-5.6 3.5-6 2.9-7.5-47.3-2.6-8-3.8-6.8-4.9-5.3-6.1-3.5-11.3-2.1-2.5-1.4-2.4-2.2-3.6-2-3.7-1.5-3-0.4-1.7 0.5-3 1.9-1.9 0.3-1.6-0.9-6.8-10.4-3.4-12.5-6.2-10.8-2.5-5.8-3.7 0.1-5.9 2.6-3.7-1.3-4.4-6.8-2.6-1.6-0.1-1-3.5-6.1-1-0.8-10.8-4.3-14.9-2.1-7 0.4-4.8 1.2-1.8 0.2-1.7-0.7-2.9-2.9-2.2-1.2-2.5-2.7-2.8-1.6-4.7-0.8-12-5.8-5.5-0.6-3.9 5-1.5-1.6-2.2-5.5-1.3-2.7-3.4-3.4-1.5-2.2 0.7-6.5-2.4-6-3.2-5.5-2.4-3-4.6-2.2-8.2-2.4-4.7-4.9-2.2-1-6.8-1.1-4.7-2-3.5-0.7 0.8-3.6 10.1-26.4 2-3.3 3.6-2.4 10-2.7 10.3 0 36.7 13.8 5.9 0.7 4.6-1.2 9.7-5.1 5.4-0.6 4.3 2.2 8.8 6.8 15.2 5.3 4.8 2.8 20.4 16.4 4.6 1.2 15.5-2.1 5 1.1 4.8 2.4 4.6 3.8 5.2 2.3 10.7-2.1 4.5 1.8 1.3 2 2.1 4.8 1.4 2.1 2.2 1.6 7.7 2.5 3.9 2.3 6.6 6.9 4.1 2.2 5.4 0.5 10.9-1.5 5.4 0.6 9.7 2.8 4.7 0.5 10.3-1.2 4.4 0.2 4.3 1.2 4.7 2.3 4.7 1.4 4.8 0.3 4.7-1 11.8-6.5z"
      id="AbkhaziaOccupiedByRussia"
      name="Abkhazia"
      ></path>
      <text x="200" y="100" text-anchor="middle" class="label">????????? ?/?</text>
  </a>
    
  <circle cx="718.8" cy="284.5" id="0"></circle>
  <circle cx="908.2" cy="350.9" id="1"></circle>
  <circle cx="557" cy="368.7" id="2"></circle>
</svg>