Question

对于客户项目，我要做这样的事情：

我在AI中创建了地图并将其导出为HTML5-SVG：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="map" viewBox="0 0 600.667 464" enable-background="new 0 0 600.667 464" xml:space="preserve">
<g id="Standvorlage" display="none">
  <g display="inline">
    <g>
      <defs>
        <rect id="SVGID_1_" x="-0.333" y="3.667" width="600" height="459"/>
      </defs>
      <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"/>
      </clipPath>
      <g clip-path="url(#SVGID_2_)">


      </g>
    </g>
  </g>
</g>
<g id="Westhofen">
  <polygon fill="#EDEDED" stroke="#000000" stroke-miterlimit="10" points="55.667,91.333 31,95.667 30,113.333 21,128.333 
    34.333,145.667 31.667,153.333 2,146 4,170 11.333,182.333 47.333,206.667 59,191.333 61.333,170.333 78.333,142.667 73.333,118 
    66.333,100.667   "/>
  <rect x="34" y="138.333" fill="none" width="44.333" height="8.667"/>
  <text transform="matrix(1 0 0 1 34 144.061)" font-family="'Arial-BoldMT'" font-size="8">Westhofen</text>
</g>
<g id="Schwerte">
  <polygon fill="#F6F6F6" stroke="#000000" stroke-miterlimit="10" points="73.667,38.333 73.667,68 65.167,75.333 61.189,96.165 
    66.333,100.667 73.333,118 78.333,142.667 93,139 93,125.333 118.667,117.333 127.667,118.333 135.333,131 161.333,134.333 
    172.333,137.333 191,128.667 186.333,107.333 177.667,99.333 181,90.5 167,80 175,70.667 189.333,70.333 191,61 196.667,54 
    194.333,44 181.333,37 165.667,30.333 155.667,30.333 154.333,15.333 119.667,12 113.667,19.667   "/>
  <rect x="101.167" y="68" fill="none" width="50" height="8.667"/>
  <text transform="matrix(1 0 0 1 101.1665 73.728)" font-family="'Arial-BoldMT'" font-size="8">Schwerte</text>
</g>
<g id="Hennen">
  <polygon fill="#EDEDED" stroke="#000000" stroke-miterlimit="10" points="189.333,70.333 199.333,64.667 203.667,51 
    221.667,49.667 224.667,38 277.667,20.667 281.667,29.333 281.667,41 285.333,59 273.667,74.667 290.333,88.333 279,103.333 
    281.333,110.333 267.667,116.333 267.333,129.667 278,137.667 259.667,165.333 237.667,172.333 235.333,178.667 230,174.667 
    217,175 217.667,182.667 215.5,186.333 210.333,169.667 200,169.667 193.333,161 189.333,155.333 172.333,137.333 191,128.667 
    186.333,107.333 177.667,99.333 181,90.5 167,80 175,70.667   "/>
  <rect x="216.75" y="93" fill="none" width="50" height="8.667"/>
  <text transform="matrix(1 0 0 1 216.7495 98.728)" font-family="'Arial-BoldMT'" font-size="8">Hennen</text>
</g>
<g id="Menden">
  <polygon fill="#F6F6F6" stroke="#000000" stroke-miterlimit="10" points="277.667,20.667 293.333,20.667 323,22 333.333,33 
    350.333,22 368.667,28.333 402.333,22.667 414.667,26.833 429,14 445,18.333 469.667,3.667 485.667,23.667 496,45.667 
    515.666,58.667 527.666,72.333 531.666,89 538.333,94.667 538.333,113.333 509.666,126.333 508.333,111 498.333,94.667 476,99 
    460.333,96.333 452.333,106.333 455.666,112.333 444,120.333 447.333,126.333 444,135 453.666,151 432.333,156.333 433,164.667 
    426,164.667 413,156.667 408,147.333 400.333,142.667 390.666,147 359.666,140 348.666,153.667 329,153 326,130 320.333,88.667 
    310.333,91.333 290.333,88.333 273.667,74.667 285.333,59 281.667,41 281.667,29.333   "/>
  <rect x="377.166" y="73" fill="none" width="50" height="8.667"/>
  <text transform="matrix(1 0 0 1 377.1655 78.728)" font-family="'Arial-BoldMT'" font-size="8">Menden</text>
</g>
<g id="Lendringsen">
  <polygon fill="#EDEDED" stroke="#000000" stroke-miterlimit="10" points="538.333,113.333 545,116.333 547.333,135.333 
    553.666,150.333 563.333,167.667 548.666,164.667 550.833,183.667 545.333,193.333 528.166,193.333 519,179.333 486.666,199 
    478.166,196.333 472,182.333 462,180.667 434.333,173.333 433,164.667 432.333,156.333 453.666,151 444,135 447.333,126.333 
    444,120.333 455.666,112.333 452.333,106.333 460.333,96.333 476,99 498.333,94.667 508.333,111 509.666,126.333   "/>
  <rect x="474.666" y="146.833" fill="none" width="50" height="8.667"/>
  <text transform="matrix(1 0 0 1 474.6655 152.5615)" font-family="'Arial-BoldMT'" font-size="8">Lendringsen</text>
</g>
<g id="Deilinghofen">
  <polygon fill="#DADADA" stroke="#000000" stroke-miterlimit="10" points="486.666,199 494.333,216 488.666,231 483.666,233.307 
    483.666,241.667 473,265 466,268.333 460.333,279.333 434.666,288.333 434.666,275.333 420.833,271.333 416,272.333 409,264.667 
    412,249.667 407.666,233.167 403.666,233.307 397.166,227 403,214.333 398.666,197.667 412,192.667 419,195.667 422.166,181.667 
    424,172.667 434.333,173.333 472,182.333 478.166,196.333   "/>
  <rect x="428.166" y="221.998" fill="none" width="50" height="8.667"/>
  <text transform="matrix(1 0 0 1 428.1655 227.7261)" font-family="'Arial-BoldMT'" font-size="8">Deilinghofen</text>
</g>
<g id="Hemer">
  <polygon fill="#C6C6C6" stroke="#000000" stroke-miterlimit="10" points="434.666,288.333 422.166,296 430.333,313.667 
    397.166,328.333 394,333.667 384.666,329.667 378.333,330 375.666,335.667 372.166,330.333 364,327.667 366.333,322 
    360.333,317.667 362,310 352,312 349,308 357.333,303.667 360,297 357,291 361.666,290.333 365,285.667 360.333,285.667 
    365.666,275 355,273.333 356.333,268.667 355.333,262 359.666,256.667 346,258.667 346,264.333 328.333,272 325.333,267.667 
    328.666,260 325.333,254.667 318.333,224 318.333,200.333 315,197.667 318.666,191.667 313,186.333 316.666,184 316.666,164.667 
    329,153 348.666,153.667 359.666,140 390.666,147 400.333,142.667 408,147.333 413,156.667 426,164.667 433,164.667 
    434.333,173.333 424,172.667 419,195.667 412,192.667 398.666,197.667 403,214.333 397.166,227 403.666,233.307 407.666,233.167 
    412,249.667 409,264.667 416,272.333 420.833,271.333 434.666,275.333   "/>
  <rect x="357.999" y="221.998" fill="none" width="50" height="8.667"/>
  <text transform="matrix(1 0 0 1 357.9985 227.7261)" font-family="'Arial-BoldMT'" font-size="8">Hemer</text>
</g>
<g id="Balve">
  <polygon fill="#F6F6F6" stroke="#000000" stroke-miterlimit="10" points="394,333.667 388.666,352.667 388.666,370.333 
    403.333,379.667 425.666,379.667 450.333,401.667 476.666,396 489.333,380.333 491.666,390.333 514.333,390.333 524.666,404 
    544,413 584,411 584,386 565.666,384 563.333,378 588.333,363.333 580.666,355.333 598.333,338.333 581.666,315 569.333,309.333 
    577,293 567,286.333 575.333,274.333 565,256.333 571.333,233.167 563.333,216.667 554.333,202 545.333,193.333 528.166,193.333 
    519,179.333 486.666,199 494.333,216 488.666,231 483.666,233.307 483.666,241.667 473,265 466,268.333 460.333,279.333 
    434.666,288.333 422.166,296 430.333,313.667 397.166,328.333   "/>
  <rect x="493.499" y="320.187" fill="none" width="50" height="8.666"/>
  <text transform="matrix(1 0 0 1 493.4985 325.9146)" font-family="'Arial-BoldMT'" font-size="8">Balve</text>
</g>
<g id="Evingsen">
  <polygon fill="#EDEDED" stroke="#000000" stroke-miterlimit="10" points="394,333.667 388.666,352.667 381.999,362 
    363.999,355.333 353.333,362 355.666,368 351.666,381 345.999,383.333 348.666,394 344,400.667 330.999,400.667 336.333,414.667 
    329.333,424 317.999,425.667 313,422 306.333,430.333 296.999,429 299.611,434.667 292.999,434.667 288.999,429.333 
    295.999,421.667 291.999,415.667 309.333,401.333 317.666,398.333 305.666,396.333 305.333,386.667 308.999,379.333 
    303.666,374.333 302.666,372.333 317.666,357 316.666,347.333 321.999,342.667 344,349 363.333,339.667 361.333,331.667 
    364,327.667 372.166,330.333 375.666,335.667 378.333,330 384.666,329.667   "/>
  <rect x="314.666" y="366.771" fill="none" width="50" height="8.666"/>
  <text transform="matrix(1 0 0 1 314.6655 372.4985)" font-family="'Arial-BoldMT'" font-size="8">Evingsen</text>
</g>
<g id="Dahle">
  <polygon fill="#C6C6C6" stroke="#000000" stroke-miterlimit="10" points="336.333,414.667 330.999,400.667 344,400.667 
    348.666,394 345.999,383.333 351.666,381 355.666,368 353.333,362 363.999,355.333 372.166,358.358 373.833,381.167 
    384.999,395.667 375.999,413 372.166,417 363.333,415.333 357.999,424.667 347.166,419.333 341.5,413   "/>
  <rect x="350.249" y="396.833" fill="none" width="50" height="8.666"/>
  <text transform="matrix(1 0 0 1 350.2485 402.561)" font-family="'Arial-BoldMT'" font-size="8">Dahle</text>
</g>
<g id="Ihmert">
  <polygon fill="#F6F6F6" stroke="#000000" stroke-miterlimit="10" points="321.999,342.667 315.999,337.333 313,327.667 
    323.666,321 318.333,314 322.917,305.417 321.333,288.333 327.499,279.667 328.333,272 346,264.333 346,258.667 359.666,256.667 
    355.333,262 356.333,268.667 355,273.333 365.666,275 360.333,285.667 365,285.667 361.666,290.333 357,291 360,297 
    357.333,303.667 349,308 352,312 362,310 360.333,317.667 366.333,322 364,327.667 361.333,331.667 363.333,339.667 344,349   "/>
  <rect x="325.249" y="322.667" fill="none" width="50" height="8.666"/>
  <text transform="matrix(1 0 0 1 325.2485 328.395)" font-family="'Arial-BoldMT'" font-size="8">Ihmert</text>
</g>
<g id="Iserlohn-Christus">
  <polygon fill="#DADADA" stroke="#000000" stroke-miterlimit="10" points="302.666,372.333 303.666,374.333 297.833,371.5 
    296,381.167 290,377.667 291.5,387.667 283.5,385.833 268.667,391 264,386.667 275.667,382.667 269.833,381 273.167,372.333 
    269,369.333 273.333,362.667 266.833,360.167 261.5,361.833 253.833,358 251.998,361.5 243.167,361.5 238.333,356.667 
    235.5,360.167 230,360 230.667,355.333 236.5,349 233.5,345.167 230,345.167 236.5,337.5 231.667,332.833 231.333,329.5 
    242.667,331.333 245,327 227.832,325.812 219.999,315.667 216.999,313.667 216.999,308.833 213.832,306.5 210.499,309.333 
    208.832,294.167 212.499,291.667 209.832,284.667 201.666,264.333 220.332,252.832 225.666,250.499 222.332,235.832 
    249.999,226.332 257.999,228.973 252.666,231.999 251.998,243.165 256.499,246.832 255.166,250.332 263.832,265.332 
    273.499,271.499 277.832,295.332 293.666,305.332 298.166,299.832 321.333,288.333 322.917,305.417 318.333,314 323.666,321 
    313,327.667 315.999,337.333 321.999,342.667 316.666,347.333 317.666,357   "/>
  <rect x="251.998" y="307.812" fill="none" width="59.334" height="16.708"/>
  <text transform="matrix(1 0 0 1 251.998 313.5396)"><tspan x="0" y="0" font-family="'Arial-BoldMT'" font-size="8">Iserlohn-</tspan><tspan x="0" y="9.601" font-family="'Arial-BoldMT'" font-size="8">Christus</tspan></text>
</g>
<g id="Altena">
  <polygon fill="#F6F6F6" stroke="#000000" stroke-miterlimit="10" points="292.999,434.667 288.999,443.417 276.917,446.417 
    268.667,451.417 268.667,456.417 259.917,456.417 259.917,461.417 245.417,459.167 245.417,449.167 235.167,449.167 
    240.167,438.667 240.917,428.667 233.167,429.917 236.248,434.667 230.917,445.042 208.167,446.167 205.167,443.667 
    201.666,447.417 201.666,439.167 207.917,434.667 213.917,424.667 209.667,424.667 209.167,415.167 212.667,411 214.167,392.917 
    211.667,392.917 212.917,381.167 227.417,382.917 225.917,376.667 228.417,372.333 233.667,374.417 235.5,360.167 238.333,356.667 
    243.167,361.5 251.998,361.5 253.833,358 261.5,361.833 266.833,360.167 273.333,362.667 269,369.333 273.167,372.333 269.833,381 
    275.667,382.667 264,386.667 268.667,391 283.5,385.833 291.5,387.667 290,377.667 296,381.167 297.833,371.5 303.666,374.333 
    308.999,379.333 305.333,386.667 305.666,396.333 317.666,398.333 309.333,401.333 291.999,415.667 295.999,421.667 
    288.999,429.333   "/>
  <rect x="241.998" y="404.646" fill="none" width="59.334" height="16.708"/>
  <text transform="matrix(1 0 0 1 241.998 410.3735)" font-family="'Arial-BoldMT'" font-size="8">Altena</text>
</g>
<g id="Wiblingwerde">
  <polygon fill="#DADADA" stroke="#000000" stroke-miterlimit="10" points="201.666,447.417 200.167,453.667 179.917,441.917 
    182.917,435.917 175.417,434.667 163.917,429.917 149.917,436.167 141.417,434.667 137.167,424.667 129.917,406.667 
    132.167,396.293 135.417,385.417 128.667,381 126.167,361.417 125.417,349 123.167,346.417 127.417,340 123.167,335.667 
    123.167,329.167 130.417,329.167 131.667,320.167 137.917,317.417 137.917,313.917 144.748,313.917 156.917,319.917 
    166.667,319.167 175.667,325.812 189.667,318.167 193.917,317.917 193.167,332.917 196.917,335.667 196.917,340 202.917,346.667 
    207.667,346.417 209.917,355.333 199.917,360.917 206.167,368.167 204.083,376.667 211.417,376.667 212.917,381.167 
    211.667,392.917 214.167,392.917 212.667,411 209.167,415.167 209.667,424.667 213.917,424.667 207.917,434.667 201.666,439.167   
    "/>
  <rect x="143.748" y="375.437" fill="none" width="59.334" height="16.708"/>
  <text transform="matrix(1 0 0 1 143.748 381.1646)" font-family="'Arial-BoldMT'" font-size="8">Wiblingwerde</text>
</g>
<g id="Letmathe">
  <polygon fill="#EDEDED" stroke="#000000" stroke-miterlimit="10" points="193.917,317.917 193.917,311.917 183.417,300.667 
    195.167,294.667 196.667,286.917 209.832,284.667 202.123,262.77 191.917,257.917 183.417,257.917 186.917,248.667 
    183.417,236.417 171.417,237.833 173.415,213.167 171.417,209.167 167,202.917 159.917,200.917 159.917,196.167 163.917,192.917 
    149.417,187.917 135.667,200.917 136.917,208.917 140.667,209.417 140.917,213.917 132.417,227.667 135.417,235.667 
    136.667,256.667 147.167,288.333 152.167,296.167 146.167,302.833 144.748,313.917 156.917,319.917 166.667,319.167 
    175.667,325.812 189.667,318.167   "/>
  <rect x="144.707" y="262.77" fill="none" width="57.416" height="11.563"/>
  <text transform="matrix(1 0 0 1 144.707 268.4985)" font-family="'Arial-BoldMT'" font-size="8">Letmathe</text>
</g>
<g id="_x31_">
  <polygon fill="#C6C6C6" stroke="#000000" stroke-miterlimit="10" points="245,327 242.667,331.333 231.333,329.5 231.667,332.833 
    236.5,337.5 230,345.167 233.5,345.167 236.5,349 230.667,355.333 230,360 235.5,360.167 233.667,374.417 228.417,372.333 
    225.917,376.667 227.417,382.917 212.917,381.167 211.417,376.667 204.083,376.667 206.167,368.167 199.917,360.917 
    209.917,355.333 207.667,346.417 202.917,346.667 196.917,340 196.917,335.667 193.167,332.917 193.917,311.917 183.417,300.667 
    195.167,294.667 196.667,286.917 209.832,284.667 212.499,291.667 208.832,294.167 210.499,309.333 213.832,306.5 216.999,308.833 
    216.999,313.667 219.999,315.667 227.832,325.812   "/>
  <rect x="214.166" y="333.61" fill="none" width="17.209" height="10.114"/>
  <text transform="matrix(1 0 0 1 214.166 339.3384)" font-family="'Arial-BoldMT'" font-size="8">1</text>
</g>
<g id="Elsey_in_Hohenlimburg">
  <polygon fill="#F6F6F6" stroke="#000000" stroke-miterlimit="10" points="135.667,200.917 123.167,208.167 119.917,211.417 
    109.167,211.417 91.417,216.667 68.417,230.5 65.167,227.917 63.667,230.665 76.667,246.167 75.417,254.167 84.417,261.417 
    88.917,271.667 95.417,277.667 88.167,283.167 94.667,289.667 86.667,291.917 79.666,307.812 83.917,327 93.167,322.667 
    94.167,331.334 99.667,327 99.667,331.667 108.917,335.667 107.167,343.724 112.417,346.917 113.667,355.333 121.417,352.417 
    119.917,360.167 126.167,361.417 125.417,349 123.167,346.417 127.417,340 123.167,335.667 123.167,329.167 130.417,329.167 
    131.667,320.167 137.917,317.417 137.917,313.917 144.748,313.917 146.167,302.833 152.167,296.167 147.167,288.333 
    136.667,256.667 135.417,235.667 132.417,227.667 140.917,213.917 140.667,209.417 136.917,208.917   "/>
  <rect x="79.666" y="239.625" fill="none" width="55" height="19.083"/>
  <text transform="matrix(1 0 0 1 79.666 245.3521)"><tspan x="0" y="0" font-family="'Arial-BoldMT'" font-size="8">Elsey in </tspan><tspan x="0" y="9.601" font-family="'Arial-BoldMT'" font-size="8">Hohenlimburg</tspan></text>
</g>
<g id="Berchum">
  <polygon fill="#C6C6C6" stroke="#000000" stroke-miterlimit="10" points="65.167,227.917 63.667,230.665 59.417,226.332 
    61.189,218.667 51.417,220.917 44.167,216.917 47.333,206.667 59,191.333 68.167,191.333 82.167,182.167 107.167,184.417 
    112.667,189.667 117.917,187.917 117.917,191.917 123.167,192.917 135.667,200.917 123.167,208.167 119.917,211.417 
    109.167,211.417 91.417,216.667 68.417,230.5   "/>
  <rect x="66.916" y="200.917" fill="none" width="40.25" height="7.042"/>
  <text transform="matrix(1 0 0 1 66.916 206.6445)" font-family="'Arial-BoldMT'" font-size="8">Berchum</text>
</g>
<g id="Ergste">
  <polygon fill="#DADADA" stroke="#000000" stroke-miterlimit="10" points="193.333,161 194.417,167.667 181.167,187.917 
    183.417,193.917 173.415,204.438 171.417,209.167 167,202.917 159.917,200.917 159.917,196.167 163.917,192.917 149.417,187.917 
    135.667,200.917 123.167,192.917 117.917,191.917 117.917,187.917 112.667,189.667 107.167,184.417 82.167,182.167 68.167,191.333 
    59,191.333 61.333,170.333 78.333,142.667 93,139 93,125.333 118.667,117.333 127.667,118.333 135.333,131 161.333,134.333 
    172.333,137.333 189.333,155.333   "/>
  <rect x="111.916" y="157.479" fill="none" width="40.25" height="7.042"/>
  <text transform="matrix(1 0 0 1 111.916 163.2065)" font-family="'Arial-BoldMT'" font-size="8">Ergste</text>
</g>
<g id="Oestrich">
  <polygon fill="#C6C6C6" stroke="#000000" stroke-miterlimit="10" points="217.667,182.667 222.667,187.917 215.417,209.167 
    221.417,216.917 215.417,223.167 219.042,237.833 220.332,252.832 201.666,264.333 202.123,262.77 191.917,257.917 
    183.417,257.917 186.917,248.667 183.417,236.417 171.417,237.833 173.415,213.167 171.417,209.167 173.415,204.438 
    183.417,193.917 181.167,187.917 194.417,167.667 193.333,161 200,169.667 210.333,169.667 215.5,186.333   "/>
  <rect x="176.541" y="211.979" fill="none" width="40.25" height="7.042"/>
  <text transform="matrix(1 0 0 1 176.541 217.7065)" font-family="'Arial-BoldMT'" font-size="8">Oestrich</text>
</g>
<g id="Iserlohn-Johannes">
  <polygon fill="#F6F6F6" stroke="#000000" stroke-miterlimit="10" points="259.667,165.333 262.666,169.667 259.667,203.333 
    268.5,211.979 286,204.438 287.667,213.833 272.167,226.332 257.999,228.973 249.999,226.332 222.332,235.832 225.666,250.499 
    220.332,252.832 219.042,237.833 215.417,223.167 221.417,216.917 215.417,209.167 222.667,187.917 217.667,182.667 217,175 
    230,174.667 235.333,178.667 237.667,172.333   "/>
  <rect x="221.625" y="198.364" fill="none" width="40.25" height="16.604"/>
  <text transform="matrix(1 0 0 1 221.6245 204.0923)"><tspan x="0" y="0" font-family="'Arial-BoldMT'" font-size="8">Iserlohn-</tspan><tspan x="0" y="9.6" font-family="'Arial-BoldMT'" font-size="8">Johannes</tspan></text>
</g>
<g id="Iserlohn-Maria-Magdalena">
  <polygon fill="#DADADA" stroke="#000000" stroke-miterlimit="10" points="318.333,224 297.667,220.917 287.667,213.833 
    286,204.438 268.5,211.979 259.667,203.333 262.666,169.667 259.667,165.333 278,137.667 267.333,129.667 267.667,116.333 
    281.333,110.333 279,103.333 290.333,88.333 310.333,91.333 320.333,88.667 329,153 316.666,164.667 316.666,184 313,186.333 
    318.666,191.667 315,197.667 318.333,200.333   "/>
  <rect x="271.5" y="149.176" fill="none" width="41.5" height="34.74"/>
  <text transform="matrix(1 0 0 1 271.4995 154.9043)"><tspan x="0" y="0" font-family="'Arial-BoldMT'" font-size="8">Iserlohn-</tspan><tspan x="0" y="9.6" font-family="'Arial-BoldMT'" font-size="8">Maria-</tspan><tspan x="0" y="19.2" font-family="'Arial-BoldMT'" font-size="8">Magdalena</tspan></text>
</g>
<g id="Iserlohn-Versöhnung">
  <polygon fill="#EDEDED" stroke="#000000" stroke-miterlimit="10" points="287.667,213.833 297.667,220.917 292.667,244.417 
    294.333,247.667 296.667,256.864 323.666,258.708 325.333,254.667 328.666,260 325.333,267.667 328.333,272 327.499,279.667 
    321.333,288.333 298.166,299.832 293.666,305.332 277.832,295.332 273.499,271.499 263.832,265.332 255.166,250.332 
    256.499,246.832 251.998,243.165 252.666,231.999 257.999,228.973 272.167,226.332   "/>
  <rect x="276.042" y="262.5" fill="none" width="47.25" height="18.666"/>
  <text transform="matrix(1 0 0 1 276.0415 268.229)"><tspan x="0" y="0" font-family="'Arial-BoldMT'" font-size="8">Iserlohn-</tspan><tspan x="0" y="9.6" font-family="'Arial-BoldMT'" font-size="8">Versöhnung</tspan></text>
</g>
<g id="_x32_">
  <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="297.667,220.917 318.333,224 325.333,254.667 
    323.666,258.708 296.667,256.864 294.333,247.667 292.667,244.417   "/>
  <rect x="305.354" y="239.625" fill="none" width="9.125" height="9.333"/>
  <text transform="matrix(1 0 0 1 305.354 245.3521)" font-family="'Arial-BoldMT'" font-size="8">2</text>
</g>
</svg>

有没有办法在<g>内放置div（蓝色叠加层）？它应该出现在悬停状态，并且应该有一个链接。

Answer 1

是的，在SVG中创建一个新的<foreignObject>元素

Can I embed HTML into an HTML5 SVG fragment?

http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

将div放在svg内

1 个答案: