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

【问题标题】：How can I add a pin marker icon on an SVG polygon element?如何在 SVG 多边形元素上添加图钉标记图标？
【发布时间】：2018-10-24 08:56:37
【问题描述】：

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

<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>

【问题讨论】：

标签： javascript jquery svg polygon marker

【解决方案1】：

我使用 Google 的“位置”图标作为符号。我希望这是你需要的。

<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>

更新

在这种情况下，我使用的是 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>

【讨论】：

非常感谢。另外，我怎样才能把我的图标（PNG）而不是谷歌的图标？
我解决了标签的问题，感谢您的解决方案。那么，如何使用 Jquery 或 Javascript 在第二个元素之后添加此标记？我尝试过使用 jQuery，我可以在源代码中看到它。但是，它没有显示在地图上。为什么？
首先，@enxaneta 非常感谢您提供的所有解决方案。最后，如何使用 jQuery 或 JS 添加<use xlink:href="#pin" x="-5" y="-24" width="24" height="24" /> 这段代码？我不想手动一一添加。
这是另一个问题。请问另一个问题。我很乐意提供帮助。
请看一下这个例子，我使用 JavaScript 为 MER 添加一个 pin：codepen.io/enxaneta/pen/…

【解决方案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);

【讨论】：