Question

我已经看过几个线程来解决这个问题，但没有什么可以解决我的问题。我有一个芬兰县的SVG文件..我想要做的是这样的地图：http://raphaeljs.com/australia.html。

我在这里http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php将SVG文件转换为Raphael JS，我试图将转换后的代码汇入html页面，但它似乎没有用。问题是为什么它不是'工作..？一切都应该是正确的，但它不会画任何东西。我还尝试使用与来自芬兰地图的那些不同路径的raphael australia完全相同的代码（并尝试了dirrerent转换器）..但仍然没有...

我是一个非常新的JavaScript，我已经研究并花了很多时间使用这个SVG文件..所以我有点沮丧..有人可以帮助我..？我在这里发布代码：

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Raphaël - Finland</title>
<style type="text/css" media="screen">
#canvas {   height: 480px; margin: 0 auto; text-align: left; width: 640px; }
</style>
 <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        window.onload = function () {
paper.setStart();
pohj_pohjanmaa=paper.path('M 148.9 256.5 L 149.8 256.1 L 150.6 256.8 L 150.6 257.7 L 148.7 258.4 L 146.9 257.2 L 145.4 257.6 L 146.4 261 L 145.1 261.9 L 143.5 260.9 L 141.8 261.4 L 140.3 257.7 L 141.2 256.1 L 146.2 254.9 L 147.6 256.5Z');

pohj_pohjanmaa.attr({'stroke-width':'1.9','stroke-miterlimit':'4','fill':'#000000','stroke':'none','stroke-opacity':'1'});

lappi=paper.path('M 215.6 213.7 L 218.3 212.3 L 221 213.1 L 221.9 212.4 L 221.8 209.9 L 219.9 208.6 L 220 206 L 221.4 205.7 L 222.1 201 L 219.3 199.9 L 217.4 195.8 L 218.1 193.1 L 220.4 192.2 L 220.3 189.7 L 231.4 192.3 L 238.2 191.4 L 236.4 186.6 L 226.8 170.3 L 227.9 166.6 L 242.6 139 L 243.2 132.2 L 236.2 127.1 L 229.1 112.6 L 218.3 108.2 L 214.6 92.9 L 219 85.1 L 219.9 78.1 L 218.7 76.1 L 213.8 76.1 L 221.9 69.3 L 220.3 63.9 L 220.9 58.8 L 228.6 48.7 L 224.2 37.5 L 211.1 31 L 210.8 28.2 L 206.8 25.7 L 202.7 19.9 L 200.3 21.4 L 198 20.6 L 196.4 23 L 190 28 L 182.6 26.1 L 178.4 27.6 L 175.8 33.8 L 171.4 37.7 L 169.2 41.1 L 170.1 43.5 L 168.6 46.1 L 165.9 61.8 L 166.5 71.1 L 165 76.4 L 161.9 75.6 L 159.1 77.3 L 155.4 82.8 L 155.8 88.2 L 153.2 88.1 L 152.3 90 L 148.7 85.6 L 142.1 82.7 L 135.9 78.1 L 132.8 79.8 L 131.1 82.7 L 127 84.2 L 122.6 86.1 L 121.6 84 L 116.8 83.5 L 112.2 80.1 L 109.5 81.3 L 109.8 76.1 L 99.3 54.8 L 93.1 52.7 L 89.3 54.6 L 86.7 57.7 L 88.2 61.7 L 87.4 64.4 L 82.5 60.6 L 79 64 L 83.5 69.7 L 83.8 73.7 L 87.2 74.6 L 92.1 84.8 L 95.6 85.9 L 96.9 89.1 L 100.3 90.8 L 101.6 94.7 L 106.5 95.8 L 113 98.8 L 120 105.3 L 120.1 109.6 L 121 112.2 L 123.1 111.9 L 124 116.1 L 128 120.3 L 126.3 122.2 L 125 124.4 L 125 127.2 L 125.2 135.7 L 122.9 141.5 L 124.6 144.6 L 128.8 145.4 L 127.7 147.7 L 128.5 150.5 L 125 152.3 L 124.8 157 L 131.9 173.5 L 129.3 176.4 L 128.8 184.8 L 126.1 187.1 L 125.4 189.5 L 124.5 192.2 L 125.2 194.7 L 124.5 196.5 L 125.6 202.4 L 128.7 205.3 L 128.8 208.4 L 131.3 212.5 L 131.6 215.5 L 133.1 219.6 L 133.1 222.9 L 134.8 222.7 L 136 220.8 L 137.4 222.6 L 140.5 223.7 L 141.5 225.2 L 140.4 227.5 L 141.2 228.4 L 142.7 227.4 L 143.3 229.3 L 144.6 229.2 L 145.6 228.3 L 147.7 228.6 L 148.9 230.3 L 150.3 230.1 L 151.2 231.1 L 151.2 231.2 L 153.4 228.9 L 156.6 227.3 L 157.1 225.1 L 165.1 225.5 L 172 221.1 L 172.6 225.6 L 186.3 226.8 L 191 225.2 L 197.4 214.9 L 199.4 215.8 L 201 215.1 L 203 220.2 L 213.2 221.8 L 217.6 219.9 L 217.8 217Z');

lappi.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});

pohj_pohjanmaa2=paper.path('M 244.1 234.8 L 245 232 L 243.4 229.3 L 247.6 226.5 L 250.5 226.2 L 249.2 217.1 L 244.8 204.4 L 241 199 L 238.2 191.4 L 231.4 192.3 L 220.3 189.7 L 220.4 192.2 L 218.1 193.1 L 217.4 195.8 L 219.3 199.9 L 222.1 201 L 221.4 205.7 L 220 206 L 219.9 208.6 L 221.8 209.9 L 221.9 212.4 L 221 213.1 L 218.3 212.3 L 215.6 213.7 L 217.8 217 L 217.6 219.9 L 213.2 221.8 L 203 220.2 L 201 215.1 L 199.4 215.8 L 197.4 214.9 L 191 225.2 L 186.3 226.8 L 172.6 225.6 L 172 221.1 L 165.1 225.5 L 157.1 225.1 L 156.6 227.3 L 153.4 228.9 L 151.2 231.1 C 151.3 231.2 151.4 231.3 151.5 231.4 L 151.6 233.4 L 152.7 233.4 L 153.3 232.7 L 156.2 237.7 L 156 239.6 L 154.8 240.9 L 154.8 243.1 L 153.8 244.2 L 154.7 245.7 L 154.6 250.4 L 153.3 252.2 L 154 253.6 L 155.9 254.7 L 156.6 256.1 L 157.1 259.2 L 158.5 260.7 L 158.4 261.5 L 157.5 261.5 L 155.3 259.7 L 153.3 259.6 L 152.9 260.6 L 153.1 261.8 L 156 264.8 L 156.6 266.5 L 155.9 267.2 L 154.5 267.1 L 154.2 265.5 L 151.3 263.8 L 148.6 263.8 L 147.1 264.9 L 143.9 265 L 142.8 265.9 L 142.2 267.1 L 140.4 267.3 L 139.6 271.2 L 136.7 273.2 L 135.2 279.7 L 133.3 281.2 L 133.2 282.2 L 130.6 283.9 L 127.5 287.2 L 127.1 288.3 L 125.9 290.2 L 125.9 292.4 L 125 292.9 L 123.8 292.1 L 122.5 294.1 L 121.4 295 L 120.3 296.7 L 118.8 299 L 118.6 302.5 L 121.6 306.6 L 123.4 306.6 L 124.8 307.8 L 126 307.2 L 124.7 305.4 L 125.9 303.1 L 129 302.5 L 130.4 308.2 L 132 309 L 132.7 312.1 L 135 313 L 137.4 320.4 L 146.7 331.7 L 149.3 331.4 L 150.3 325.3 L 152.5 324.4 L 159.5 329.2 L 163 329.2 L 164.5 330.4 L 165.8 333.3 L 170.4 333.2 L 172.8 326.4 L 174.1 325.6 L 173 314.3 L 180.4 307.4 L 185.6 305.7 L 184 303.6 L 184 293.1 L 181.6 291.5 L 179.9 291.8 L 177.7 289.9 L 178 287.8 L 176.9 285.3 L 174.9 284 L 178.7 280.2 L 180.7 279.6 L 181.4 277.2 L 185.7 275.1 L 187.2 270.8 L 191.1 268.9 L 191.2 267.8 L 195.8 268.9 L 196.6 266.6 L 196.2 260.4 L 193.7 258.3 L 195.6 255.2 L 199.8 255.2 L 201.9 253.5 L 204.4 253.9 L 206.5 255.3 L 207.4 249.7 L 209.6 248.3 L 220.5 246.4 L 221 241.4 L 227.1 238.5 L 228.4 239.5 L 230.6 238.9 L 232.5 234.9 L 233.4 235.6 L 238.6 235.9 L 244.1 234.8Z');
pohj_pohjanmaa2.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});

kainuu=paper.path('M 250.7 277.9 L 252.4 276.5 L 252.5 273.5 L 250.9 271.5 L 251.6 269.1 L 244 267.5 L 241.8 259 L 242.6 256 L 245.5 255 L 246.6 252.7 L 245.5 251.3 L 246.8 248.6 L 245.6 247.2 L 241.7 246.9 L 243.3 241.3 L 243.7 236.5 L 244.2 234.7 L 238.6 235.9 L 233.4 235.6 L 232.5 234.9 L 230.6 238.9 L 228.4 239.5 L 227.1 238.5 L 221 241.4 L 220.5 246.4 L 209.6 248.3 L 207.4 249.7 L 206.5 255.3 L 204.3 253.9 L 201.9 253.5 L 199.8 255.2 L 195.6 255.1 L 193.7 258.3 L 196.2 260.4 L 196.6 266.6 L 195.8 268.9 L 191.2 267.8 L 191.1 268.9 L 187.2 270.8 L 185.7 275.1 L 181.4 277.2 L 180.7 279.6 L 178.7 280.2 L 174.9 284 L 176.9 285.3 L 178 287.8 L 177.7 289.9 L 179.9 291.8 L 181.6 291.5 L 184 293.1 L 184 303.6 L 185.6 305.7 L 192.1 308.1 L 199.7 308.7 L 209 314.6 L 215 321.6 L 219 312.3 L 229.1 314.2 L 244.1 311.5 L 247.3 319.5 L 249.3 317.2 L 253.1 317.6 L 252.8 317.3 L 257.6 313.9 L 262.8 300.5 L 261.2 293.1 L 253.1 287.6 L 250.7 281.3Z');
kainuu.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});

etela_karjala=paper.path('M 225.9 363.5 L 224 364 L 226.6 369.9 L 228.5 370.5 L 232.6 374.3 L 232.9 375.9 L 235.1 377.7 L 234.2 379.8 L 236.3 381.3 L 238.4 380.1 L 239.6 381.6 L 239.6 384.1 L 242.4 388.7 L 244.1 397.8 L 247 399 L 248.1 401.7 L 247.2 402.9 L 248.9 406.3 L 247 411.8 L 260.4 404.6 L 263.1 401.8 L 269 391.3 L 273.4 384.7 L 276.2 383.6 L 281.5 373.8 L 287.7 354.1 L 285.9 349.5 L 280.6 345.2 L 278.9 339.3 L 275.1 336.7 L 270.4 332.9 L 263.7 329.9 L 261 326.1 L 253 317.6 L 249.3 317.3 L 247.2 319.5 L 244.1 311.5 L 229.1 314.2 L 219 312.4 L 216.6 317.8 L 219.6 321 L 221.9 321.2 L 222.5 326 L 223.8 327 L 222.8 328.5 L 223.4 334 L 225.7 335.3 L 225.7 338.6 L 223.7 342.3 L 225.3 343.8 L 228.8 351.1 L 233.6 353.6 L 230.4 355.9 L 233 359.5 L 230.3 363.3 L 226.5 361.7Z');

etela_karjala.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});

etela_savo=paper.path('M 173.8 428.4 L 173.9 430.3 L 176.1 432.3 L 177.4 432.5 L 177.6 434.9 L 179.2 434.2 L 181.6 438 L 183.9 436.9 L 183.9 434.5 L 186.9 434.6 L 186.9 438.6 L 191.1 440.7 L 193.5 439.9 L 196.8 439.1 L 199.2 435 L 201.5 434.8 L 202.9 431.9 L 205.6 432 L 207.1 430.1 L 209.6 430.6 L 217 429.9 L 220.8 425.2 L 222 422.4 L 224.1 424.1 L 229.7 424 L 230.4 421.5 L 235 421.7 L 239.6 420.2 L 242.4 415.5 L 246.1 414.3 L 246.9 411.9 L 247 411.8 L 248.9 406.3 L 247.2 402.9 L 248.1 401.7 L 247 399 L 244.1 397.8 L 242.4 388.7 L 239.6 384.1 L 239.6 381.6 L 238.4 380.1 L 236.3 381.3 L 234.2 379.8 L 235.1 377.7 L 232.9 375.9 L 232.6 374.3 L 228.5 370.5 L 226.6 369.9 L 225.1 370.3 L 221.2 374.2 L 219.2 374.2 L 219.2 378.6 L 217.4 378.4 L 216 380.7 L 217.6 381.9 L 216.7 383.8 L 219.4 383.7 L 219.5 386 L 222 385.4 L 225.5 389.7 L 224.4 392.3 L 217.5 389.6 L 213.2 390.1 L 210.6 387.8 L 206.8 387.6 L 204.6 383.8 L 197 377.1 L 193.3 379.6 L 191.7 377.6 L 188.5 378.4 L 187.7 379.6 L 185.5 378.7 L 183.1 379.9 L 181.5 381 L 184 383.8 L 181.8 384.6 L 180.5 390.1 L 177.9 388.7 L 174.2 391 L 172.1 395.2 L 175.4 401.3 L 174.5 402.8 L 175.2 410.9 L 178.4 415.6 L 177.6 418.5 L 174.8 417.6 L 174.4 418.6 L 172.9 422.6 L 172.4 427.4Z');
etela_savo.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});

pohj_savo=paper.path('M 222.8 328.5 L 223.8 327 L 222.5 326 L 221.9 321.2 L 219.6 321 L 216.6 317.8 L 215 321.6 L 209 314.6 L 199.7 308.7 L 192.1 308.1 L 185.6 305.7 L 180.4 307.4 L 173 314.3 L 174.1 325.6 L 172.8 326.4 L 170.4 333.2 L 169.4 337.1 L 171 339.3 L 171.5 347.2 L 174.5 351.5 L 172.7 352.7 L 174.1 354.1 L 172.9 356.1 L 168.6 356.7 L 174.8 364.5 L 176.7 364.1 L 179.3 368.1 L 180 372.4 L 177.1 375.6 L 177.1 376.9 L 180.5 379 L 182.1 378.8 L 183.1 379.9 L 185.5 378.7 L 187.7 379.6 L 188.5 378.4 L 191.7 377.6 L 193.3 379.6 L 197 377.1 L 204.6 383.8 L 206.8 387.6 L 210.6 387.8 L 213.2 390.1 L 217.5 389.6 L 224.4 392.3 L 225.5 389.7 L 222 385.4 L 219.5 386 L 219.4 383.7 L 216.7 383.8 L 217.6 381.9 L 216 380.7 L 217.4 378.4 L 219.2 378.6 L 219.2 374.2 L 221.2 374.2 L 225.1 370.3 L 226.6 369.9 L 224 364 L 225.9 363.5 L 226.5 361.7 L 230.3 363.3 L 233 359.5 L 230.4 355.9 L 233.6 353.6 L 228.8 351.1 L 225.3 343.8 L 223.7 342.3 L 225.7 338.6 L 225.7 335.3 L 223.4 334Z');

pohj_savo.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});

kanta_hame=paper.path('M 105.8 445.3 L 103.7 443.7 L 102.1 444.6 L 102.1 445.9 L 103.9 447 L 102.7 449.8 L 100.5 450.3 L 100.3 452.3 L 101.6 453.8 L 100.5 454.7 L 100.7 456.5 L 104.5 458.4 L 107.3 457 L 112.7 461.1 L 117.4 462.6 L 124.2 463.8 L 125.1 465.7 L 126.7 464.5 L 128.3 465.3 L 128.8 466.8 L 132.9 466 L 132.8 463.8 L 133.9 462.2 L 136.6 462.6 L 141 462 L 142.5 461.4 L 145.5 462.3 L 145.3 460.9 L 147.3 459.5 L 145.9 458.5 L 144.6 459.7 L 145 457.8 L 146.6 457.3 L 145.9 455.7 L 144.9 453.6 L 146.5 452.3 L 143.8 449.1 L 144.9 444.6 L 149.1 442.1 L 148.7 436.5 L 146.5 434.8 L 144.8 435.6 L 145.3 433.8 L 141.6 432.3 L 138.9 433.5 L 137.2 431.7 L 136.4 433.6 L 132.6 432.1 L 128.4 435.5 L 127.6 435 L 127.1 435.8 L 127.2 436.7 L 127.7 437.3 L 126.3 438.9 L 116 442.8 L 116.7 447.7 L 115.9 448.4 L 112.8 445.1 L 108.3 446.8 L 106.2 446.8Z');

kanta_hame.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});

paijat_hame=paper.path('M 164.2 410.7 L 167 412.1 L 170.1 416.9 L 174.5 418.7 L 173 422.7 L 172.4 427.5 L 173.9 428.5 L 174 430.4 L 176.1 432.4 L 177.4 432.6 L 177.6 434.9 L 176.2 435.7 L 175 438.8 L 171.9 440.9 L 168.6 440.9 L 168 442.9 L 168.9 444.8 L 169.6 448.2 L 167.7 448.1 L 166.9 449.6 L 169.3 450.7 L 168.1 452.9 L 168.2 455.4 L 170.3 456.8 L 170.6 459.1 L 171.2 459.4 L 171 461.5 L 169 462.6 L 167.1 460.9 L 164.1 461.5 L 164 459.5 L 162 460.9 L 160.7 460.7 L 156.5 462 L 155.5 460.7 L 155.2 460.8 L 154.2 457 L 153.5 456.3 L 151.1 458.8 L 148 455.1 L 145.9 455.7 L 144.9 453.6 L 146.5 452.3 L 143.8 449.1 L 144.9 444.6 L 149.1 442.1 L 148.7 436.5 L 146.5 434.8 L 144.8 435.6 L 145.3 433.8 L 141.6 432.3 L 141.2 424.4 L 142.5 425.2 L 154.1 424.1 L 156.4 415.7 L 159.9 414.1 L 161.8 415Z');

paijat_hame.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});

ahvenanmaa=paper.path('M 47.7 465.5 L 48.9 464.8 L 50.1 466.6 L 49.7 468.3 L 48.5 468.9 L 47.5 466.7Z M 49.9 469.4 L 51.5 468.1 L 52.5 469.3 L 52.1 471.5 L 51.3 472.2 L 50.3 471.6Z M 47.9 472.4 L 46.7 472.8 L 45.9 471.9 L 46.4 470.4 L 47.9 471Z M 44.4 472.6 L 43.3 472.9 L 42.9 472.4 L 42.9 472.3 L 43.3 471 L 44.2 470.4 L 44.9 471.1Z M 45.7 475.8 L 44.2 477.2 L 43.5 476.7 L 43.3 476 L 43.3 474.7 L 44.6 474.1 L 45.4 475.2Z M 42.5 477.7 L 42.7 478.7 L 41.2 478.7 L 40.7 476.9 L 41.2 476.1 L 42.2 476.3 L 42.5 477.1Z M 41.2 479.6 L 42.1 481.6 L 41.9 482 L 41.8 482.8 L 40.1 482.7 L 39.7 480.9 L 38.9 480 L 39.7 478.7Z M 36.3 471.5 L 33 471.2 L 33 470.2 L 33.9 469.5 L 36.3 470.7Z M 34.5 473.3 L 35.3 472.6 L 35.9 473.5 L 35.4 474.6 L 36.2 475.8 L 35 477.5 L 34.2 477.5 L 34.3 475.3 L 33.4 474.3Z M 37.9 484.5 L 38.7 485.4 L 37.7 486.6 L 34.6 487.5 L 32.3 487.5 L 31.9 486.7 L 33.9 485 L 35.1 484.1Z M 36.1 482.3 L 36.8 481.5 L 37.6 481.7 L 38.6 482.7 L 38.7 483.4 L 36.9 483.2Z M 31.5 481.6 L 32 482.7 L 30.4 482.7 L 30.1 480.4 L 31.6 478.7 L 32.1 478.8 L 32.4 480Z M 30.2 482.7 L 30.2 483.7 L 29.7 484.8 L 30.6 485.7 L 30.4 486.9 L 28.9 487.9 L 28.6 486.3 L 27.6 486.5 L 26.9 484.9 L 24.8 483.4 L 23 483.8 L 22.8 482.3 L 22.1 481.4 L 20.6 481.2 L 19.8 480.3 L 19.5 478.4 L 18.1 476.8 L 17.1 476.8 L 16.3 476.6 L 15.9 478 L 14.8 478.1 L 14 476.3 L 14.4 474.3 L 13.6 473.5 L 14.1 472.2 L 17 470.9 L 18.3 471.4 L 19.7 471.1 L 20.8 469.7 L 22 470.5 L 21.7 472.7 L 22.6 473 L 23.4 472.1 L 23.1 471.4 L 23.1 470.5 L 22.4 469.3 L 20.3 469 L 22.2 466.5 L 24 465.7 L 26.4 468 L 28.5 468.4 L 29.5 470 L 30.8 470.6 L 31 472.1 L 32.5 474 L 31.3 477.2 L 28.7 477.6 L 27.1 475.8 L 26.1 475.7 L 25.2 477.2 L 26.7 478.3 L 25.4 481.3 L 25.8 481.8 L 27 481.8 L 27.8 481.3Z M 44.4 490.4 L 46.4 489.5 L 47 489.9 L 48.2 490.5 L 47.8 491 L 47.6 491.8 L 46.7 491.8 L 45.9 493 L 44 491.5Z');

ahvenanmaa.attr({'fill':'#000000','stroke':'none'});
/*
...and so on..
*/
var st = paper.setFinish();
/*********************************************************************************
The below lines use the set to transform your SVG to:
(1)Translate (Move) your image to the top left of the paper.
(2)Scale your vector image to fit inside the the paper.
Remove this comment and alter or remove the code below it.
*********************************************************************************/
var translate='t'+(-1*st.getBBox().x)+','+(-1*st.getBBox().y);
st.transform(translate+'s0.91,0.91,0,0');
/*********************************************************************************
The below lines use the set to add event handlers.
As you mouseover the above code window vectors they change colour.
If your trying to locate a path, click on the vector image above...
Remove this comment and alter or remove the code below it.
*********************************************************************************/
function callback(member)
{
member.mouseover(function (e) {  this.ofill=this.attr('fill');this.attr({fill:'#ffffff'}); });
member.mouseout(function (e) { this.attr({fill:this.ofill}); });
member.click(function (e) { var thisPath=this.attr('path');alert('You just clicked on Element #'+this.id+'.To help you find it in the code its path starts with......'+thisPath); });
}
st.forEach(callback);
        }
</script>
</head>

<body>
<div id="canvas">
<div id="paper"></div>
<div id="pohj_pohjanmaa"></div>
<div id="lappi"></div>
<div id="pohj_pohjanmaa2"></div>
<div id="kainuu"></div>
<div id="etela-karjala"></div>
<div id="etela-savo"></div>
<div id="pohj_savo"></div>
<div id="kanta_hame"></div>
<div id="paijat_hame"></div>
<div id="ahvenanmaa"></div>
<div id="varsinais-suomi"></div>
<div id="etela_pohjanmaa"></div>
<div id="keski_suomi"></div>
<div id="pirkanmaa"></div>
<div id="satakunta"></div>
<div id="kymenlaakso"></div>
<div id="keski_pohjanmaa"></div>
<div id="uusimaa"></div>
<div id="etela_karjala"></div>
<div id="pohjanmaa"></div>
</div>

</body>
</html>

Answer 1

转换器做的最大的事情就是从你提供的SVG文件中提取路径数据。我的建议是使用该数据，但使用其他代码。

为了简化并尽可能保持DRY，您需要创建两个对象。一个将包含每个县的路径数据，另一个将包含县属性数据。使用这些对象，您可以运行一个简单的for循环并以这种方式构建地图。我希望以下代码有所帮助。

请注意 pathData 表示路径字符串，例如'M 192.9 S 9494 ... 290 Z'

<强>的Javascript

//create Raphael county map
var countyMap = Raphael("canvas", 640, 480);

//create county map object to hold extracted path data
var finlandCounty = {
    pohj_pohjanmaa:'pathData',
    lappi: 'pathData',
    kainuu: 'pathData',
    etela_karjala: 'pathData',
    etela_savo: 'pathData'
};

//create attribute object
var countyAttr = {
    'stroke-width':1.9,
    'stroke-miterlimit':4,
    fill:'#000000',
    stroke:'none',
    'stroke-opacity':1
};

//loop through county object list and create the map
for (var county in finlandCounty) {
    county = countyMap.path(county).attr(countyAttr);

    //set click event
    county.click(function(){
        alert('You just clicked on Element '+this.id);
    }

    //set hover event
    county.hover(
        function () {
            this.animate({fill: "#ffffff"}, 400);
        },function () {
            this.animate({fill:countyAttr.fill}, 400);
        });
    }
}

<强> HTML

<body>
<div id="canvas></div>
</body>

Answer 2

您的代码最大的问题是我没有看到您实际创建纸质对象的任何地方。您只需使用变量paper，假设它是Raphael纸质对象，但是从您的代码中看起来它实际上就像是undefined。

您需要创建纸质对象：

var paper = Raphael('paper');

如果你看一下Jon Black的回答，他会把他的论文称为countyMap，并在这一行上初始化：

var countyMap = Raphael("canvas", 640, 480);

不必将论文称为paper，变量paper不是一个特殊的魔术变量，它会自动创建一个Raphael纸质对象。您需要自己创建纸质对象，并且可以将其命名为任何名称。

我强烈建议您使用其他名称（例如canvas而不是paper）为Raphael纸张对象编写代码，以便了解事情的确如何运作并避免让自己感到困惑

如何在网页上使用转换为RaphaëlJS的SVG代码？

2 个答案: