Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use SVG code converted to Raphaël JS on a web page?
    text
    copied!<p>I have seen several threads that adress this question but nothing that really solves my problem. I have a SVG file with Finland counties.. What I want to do is map like this: <a href="http://raphaeljs.com/australia.html" rel="nofollow">http://raphaeljs.com/australia.html</a>. </p> <p>I converted the SVG file to Raphael JS in here <a href="http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php" rel="nofollow">http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php</a> and I'm tryig to sink that converted code into html page, but it just doesn't seem to work.. The question is why it isn't working..? Everything is supposed to be correct but it just don't draw anything. I also tryed to make exactly the same code as in raphael australia with those different paths from the map of Finland though (and tryed dirrerent converters as well).. But still nothing..</p> <p>I'm pretty new with JavaScript and I have studyed and spended a lot of time with this SVG file as well.. so I'm getting little bit frustrated.. Can someone please help me..? I post the code on here under:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Raphaël - Finland&lt;/title&gt; &lt;style type="text/css" media="screen"&gt; #canvas { height: 480px; margin: 0 auto; text-align: left; width: 640px; } &lt;/style&gt; &lt;script src="raphael.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt; &lt;script type="text/javascript" charset="utf-8"&gt; 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); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="canvas"&gt; &lt;div id="paper"&gt;&lt;/div&gt; &lt;div id="pohj_pohjanmaa"&gt;&lt;/div&gt; &lt;div id="lappi"&gt;&lt;/div&gt; &lt;div id="pohj_pohjanmaa2"&gt;&lt;/div&gt; &lt;div id="kainuu"&gt;&lt;/div&gt; &lt;div id="etela-karjala"&gt;&lt;/div&gt; &lt;div id="etela-savo"&gt;&lt;/div&gt; &lt;div id="pohj_savo"&gt;&lt;/div&gt; &lt;div id="kanta_hame"&gt;&lt;/div&gt; &lt;div id="paijat_hame"&gt;&lt;/div&gt; &lt;div id="ahvenanmaa"&gt;&lt;/div&gt; &lt;div id="varsinais-suomi"&gt;&lt;/div&gt; &lt;div id="etela_pohjanmaa"&gt;&lt;/div&gt; &lt;div id="keski_suomi"&gt;&lt;/div&gt; &lt;div id="pirkanmaa"&gt;&lt;/div&gt; &lt;div id="satakunta"&gt;&lt;/div&gt; &lt;div id="kymenlaakso"&gt;&lt;/div&gt; &lt;div id="keski_pohjanmaa"&gt;&lt;/div&gt; &lt;div id="uusimaa"&gt;&lt;/div&gt; &lt;div id="etela_karjala"&gt;&lt;/div&gt; &lt;div id="pohjanmaa"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload