0

この質問に対処するいくつかのスレッドを見てきましたが、私の問題を本当に解決するものは何もありません。私はフィンランドの郡のSVGファイルを持っています。

ここで SVG ファイルを Raphael JS に変換しましたhttp://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php 。変換したコードを html ページにシンクしようとしていますが、うまくいかないようです..問題は、なぜそれが機能しないのかということです..？すべてが正しいはずですが、何も描画されません。私はまた、フィンランドの地図からのそれらの異なるパスを使用して、ラファエルオーストラリアとまったく同じコードを作成しようとしました（また、異なるコンバーターも試しました）..しかし、まだ何も..

私は 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>
4

2 に答える 2

0

コンバーターが行った最大のことは、フィードした SVG ファイルからパス データを取得することでした。私の提案は、そのデータを使用することですが、他のコードを使用することです。

単純化して可能な限りDRYに保つために、2 つのオブジェクトを作成する必要があります。1 つは各郡のパス データを含み、もう 1 つは郡の属性データを含みます。これらのオブジェクトを使用して、単純な 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>
于 2013-05-13T05:30:13.097 に答える
0

コードの最大の問題は、実際に紙のオブジェクトを作成する場所がどこにもないことです。ラファエルの紙のオブジェクトであると仮定して変数を使用するだけですpaperが、コードからは実際には のように見えますundefined。

紙のオブジェクトを作成する必要があります。

var paper = Raphael('paper');

Jon Black の回答を見ると、彼は自分の論文を呼び出し、countyMap次の行で初期化されています。

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

紙を呼び出す必要はなくpaper、変数paperは Raphael 紙オブジェクトを自動的に作成する特別な魔法の変数ではありません。自分で紙のオブジェクトを作成する必要があり、好きな名前を付けることができます。

実際の動作に慣れ、混乱を避けるために、Raphael paper オブジェクトのcanvas代わりに別の名前 (たとえば、など)を使用してコードを記述することを強くお勧めします。paper

于 2013-05-13T07:46:51.913 に答える