如何在 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

我正在使用谷歌的图标"位置"作为符号。我希望这是你需要的。

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

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