对于客户项目,我要做这样的事情:
我在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(蓝色叠加层)?它应该出现在悬停状态,并且应该有一个链接。
答案 0 :(得分:1)
是的,在SVG中创建一个新的<foreignObject>
元素
Can I embed HTML into an HTML5 SVG fragment?
http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg