title: How can I add a pin marker icon on an SVG polygon element?
body: <p>I have na SVG Map that contains cities and their districts. You can look one of them below. I want to add a <a href="https://image.flaticon.com/icons/svg/33/33622.svg" rel="nofollow noreferrer">pin icon</a> on the center of district. You can see the text (district's name) in the middle of the district. I want to put over the text.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;g id="Hakkari" transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87"&gt;
    &lt;g id="Merkez" transform="translate(10.000000, 2.000000)"&gt;
      &lt;polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"&gt;&lt;/polygon&gt;
      &lt;g id="MER" transform="translate(85.000000, 98.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"&gt;
        &lt;text&gt;
          &lt;tspan x="0" y="6"&gt;MER&lt;/tspan&gt;
        &lt;/text&gt;
      &lt;/g&gt;
    &lt;/g&gt;
    &lt;g id="Yüksekova" transform="translate(165.000000, 0.000000)"&gt;
      &lt;polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"&gt;&lt;/polygon&gt;
      &lt;g id="YÜK" transform="translate(78.000000, 86.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"&gt;
        &lt;text&gt;
          &lt;tspan x="0" y="6"&gt;YÜK&lt;/tspan&gt;
        &lt;/text&gt;
      &lt;/g&gt;
    &lt;/g&gt;
    &lt;g id="Şemdinli" transform="translate(244.000000, 107.000000)"&gt;
      &lt;polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"&gt;&lt;/polygon&gt;
      &lt;g id="ŞEM" transform="translate(81.000000, 62.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"&gt;
        &lt;text&gt;
          &lt;tspan x="0" y="6"&gt;ŞEM&lt;/tspan&gt;
        &lt;/text&gt;
      &lt;/g&gt;
    &lt;/g&gt;
    &lt;g id="Çukurca" transform="translate(0.000000, 143.000000)"&gt;
      &lt;polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"&gt;&lt;/polygon&gt;
      &lt;g id="ÇUK" transform="translate(104.000000, 50.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"&gt;
        &lt;text&gt;  
          &lt;tspan x="0" y="6"&gt;ÇUK&lt;/tspan&gt;
        &lt;/text&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>