如何使用jQuery或JavaScript添加<img/>元素？

Question

我想使用jQuery或Javascript在SVG中的第二个元素之后添加标签。关于这个问题，很多开发人员说jQuery与SVG添加和编辑任何元素都不兼容。您对此问题还有什么解决方案？

您可以在下面查看我的SVG代码：

<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" />
<!-- I want to add this <use> image tag as above -->
          <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>