如何在SVG多边形元素上添加图钉标记图标？

Question

我有不包含城市及其地区的SVG地图。 您可以在下面查看其中之一。 我想在区域中心添加一个图钉图标 。 您可以在区域的中间看到文本（区域名称）。 我想把文字放在上面。

<g id="Hakkari" transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87">
  <g id="Merkez" transform="translate(10.000000, 2.000000)">
    <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"></polygon>
    <g id="MER" transform="translate(85.000000, 98.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
      <text>
        <tspan x="0" y="6">MER</tspan>
      </text>
    </g>
  </g>
  <g id="Yüksekova" transform="translate(165.000000, 0.000000)">
    <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"></polygon>
    <g id="YÜK" transform="translate(78.000000, 86.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
      <text>
        <tspan x="0" y="6">YÜK</tspan>
      </text>
    </g>
  </g>
  <g id="Şemdinli" transform="translate(244.000000, 107.000000)">
    <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"></polygon>
    <g id="ŞEM" transform="translate(81.000000, 62.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
      <text>
        <tspan x="0" y="6">ŞEM</tspan>
      </text>
    </g>
  </g>
  <g id="Çukurca" transform="translate(0.000000, 143.000000)">
    <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"></polygon>
    <g id="ÇUK" transform="translate(104.000000, 50.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
      <text>  
        <tspan x="0" y="6">ÇUK</tspan>
      </text>
    </g>
  </g>
</g>

Answer 1

我使用Google的图标“ location on”作为符号。 我希望这是您所需要的。

 <svg viewBox="4600 1300 500 300"> <defs> <symbol id="pin" viewBox='0 0 24 24'><title>location on</title> <path d='M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'></path> <path d='M0 0h24v24h-24z' fill='none'></path> </symbol> </defs> <g id="Hakkari" transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87"> <g id="Merkez" transform="translate(10.000000, 2.000000)"> <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"></polygon> <g id="MER" transform="translate(85.000000, 98.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"> <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> <text> <tspan x="0" y="6">MER</tspan> </text> </g> </g> <g id="Yüksekova" transform="translate(165.000000, 0.000000)"> <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"></polygon> <g id="YÜK" transform="translate(78.000000, 86.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"> <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> <text> <tspan x="0" y="6">YÜK</tspan> </text> </g> </g> <g id="Şemdinli" transform="translate(244.000000, 107.000000)"> <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"></polygon> <g id="ŞEM" transform="translate(81.000000, 62.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"> <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> <text> <tspan x="0" y="6">ŞEM</tspan> </text> </g> </g> <g id="Çukurca" transform="translate(0.000000, 143.000000)"> <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"></polygon> <g id="ÇUK" transform="translate(104.000000, 50.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"> <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> <text> <tspan x="0" y="6">ÇUK</tspan> </text> </g> </g> </g> </svg> 

UPDATE

在这种情况下，我使用的是png而不是SVG路径。 png在这种情况下是正方形（120px / 120px），背景透明。

 <svg viewBox="4600 1300 500 300"> <symbol id="pin" viewBox='0 0 24 24'><title>location on</title> <!--<path d='M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'></path> <path d='M0 0h24v24h-24z' fill='none'></path>--> <image width="24" height="24" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png" /> </symbol> <g id="Hakkari" transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87"> <g id="Merkez" transform="translate(10.000000, 2.000000)"> <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"></polygon> <g id="MER" transform="translate(85.000000, 98.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"> <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> <text> <tspan x="0" y="6">MER</tspan> </text> </g> </g> <g id="Yüksekova" transform="translate(165.000000, 0.000000)"> <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"></polygon> <g id="YÜK" transform="translate(78.000000, 86.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"> <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> <text> <tspan x="0" y="6">YÜK</tspan> </text> </g> </g> <g id="Şemdinli" transform="translate(244.000000, 107.000000)"> <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"></polygon> <g id="ŞEM" transform="translate(81.000000, 62.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"> <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> <text> <tspan x="0" y="6">ŞEM</tspan> </text> </g> </g> <g id="Çukurca" transform="translate(0.000000, 143.000000)"> <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"></polygon> <g id="ÇUK" transform="translate(104.000000, 50.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold"> <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> <text> <tspan x="0" y="6">ÇUK</tspan> </text> </g> </g> </g> </svg> 

Answer 2

我的想法与下面的“ enxaneta”相同：

// use <path> or <use> element as you like
var pinIconNode = document.createElement("path");

// supporse the <g> element id is the city you want
var city = document.getElementById("cityName");
city.prepend(pinIconNode);