I'm using an SVG textpath to animate a word around a closed path. How can I get the animation to treat the path as a circle, and have the text smoothly transition from the end of the path to the beginning? Right now it finishes drawing the text (clipping the spillover), till the text disappears, then starts again at the beginning by popping the word back at the start.
<html><head>
<style type="text/css">
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%; margin: 0; padding: 0;}
svg {width: 100%; height: 100%;}
text {fill: deepPink; font-size: 9em;}
</style>
</head>
<body>
<svg viewBox="0 0 800 600">
<path id="myPath" fill="none" stroke="#999999" stroke-width=45 stroke-miterlimit="10" stroke-linecap="round" d="M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z"/>
<path fill="none" stroke="#FFFF00" stroke-width= 3 stroke-miterlimit="10" stroke-linecap="round" d="M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z"/>
<text>
<textpath xlink:href="#myPath">Autotopia
<animate attributeName="startOffset" from="0%" to="100%" begin="0s" dur="10s" repeatCount="indefinite"/>
</textpath>
</text>
</svg>
</body></html>
Code sample at mvjantzen.com/mobility/svganimatedtext.html
How about having the path repeat (so it goes round twice) then animate from 0 to 50%
You can use the snap svg library to achieve this:
http://jsbin.com/gixomogiwo/1/edit
And here is the code:
var s = Snap(800,800);
var path = "M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z";
setInterval(function(){ var text = s.text(50,50,'Autotopia')
.attr({ 'textpath': path,'font-size' : '3em' })
.textPath.animate({ 'startOffset': 3000 }, 5000 ); }, 5000);
Related
I have a svg file and I would like to know if it is possible to transform it automatically into html code where a <g> is included in a <div>.
For example :
This code
<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g>
<!-- background -->
<rect class="wufoo-background" fill="#D03E27" width="400" height="400" />
</g>
<g>
<!-- logo letters -->
<path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
<path class="wufoo-letter" fill="#F4F4F4" d="..." />
</g>
<!-- dinosaur -->
<g class="trex">
<path ... />
<path ... />
</g>
</svg>
becomes this
<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<div>
<g>
<!-- background -->
<rect class="wufoo-background" fill="#D03E27" width="400" height="400" />
</g>
</div>
<div>
<g>
<!-- logo letters -->
<path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
<path class="wufoo-letter" fill="#F4F4F4" d="..." />
</g>
</div>
<div>
<!-- dinosaur -->
<g class="trex">
<path ... />
<path ... />
</g>
</div>
</svg>
div is not a valid child element of svg, and svg child elements (e.g. g, path, etc) are not valid HTML elements. While you might be able to force-inject certain tags, it won't do any good for you.
If you're looking to do some custom styling or/and interaction per different parts of SVG, you'll need to do some manual work to separate out them into relevant parts and use them as inline within your HTML.
You could do that but the result would be neither valid html nor a valid svg. What you can do is inlining several svgs into a html page.
Like this:
<div>
<svg version="1.1" class="wufoo-ad" id="wufoo-ad-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 40" enable-background="new 0 0 400 40" xml:space="preserve">
<g>
<!-- background -->
<rect class="wufoo-background" fill="#D03E27" width="400" height="40" />
</g>
</svg>
</div>
<div>
<svg version="1.1" class="wufoo-ad" id="wufoo-ad-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 120" enable-background="new 0 0 400 120" xml:space="preserve">
<g stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none">
<!-- logo letters -->
<path transform="translate(10,10)" class="wufoo-letter" fill="#F4F4F4" d="M 39.4 62.6 L 39.4 38.4 L 8.2 38.4 L 8.2 65.6 A 13.363 13.363 0 0 1 7.786 65.73 Q 7.304 65.874 6.644 66.039 A 42.972 42.972 0 0 1 6.6 66.05 Q 5.6 66.3 4.4 66.3 A 7.625 7.625 0 0 1 2.753 66.139 Q 0 65.527 0 62.6 L 0 5.2 A 5.41 5.41 0 0 1 0.325 5.084 Q 0.685 4.966 1.212 4.833 A 25.952 25.952 0 0 1 1.55 4.75 A 9.267 9.267 0 0 1 3.137 4.52 A 10.939 10.939 0 0 1 3.8 4.5 A 7.625 7.625 0 0 1 5.447 4.662 Q 8.2 5.273 8.2 8.2 L 8.2 31.6 L 39.4 31.6 L 39.4 5.2 A 5.41 5.41 0 0 1 39.725 5.084 Q 40.085 4.966 40.612 4.833 A 25.952 25.952 0 0 1 40.95 4.75 A 9.267 9.267 0 0 1 42.537 4.52 A 10.939 10.939 0 0 1 43.2 4.5 A 7.625 7.625 0 0 1 44.847 4.662 Q 47.6 5.273 47.6 8.2 L 47.6 65.6 A 13.363 13.363 0 0 1 47.186 65.73 Q 46.704 65.874 46.044 66.039 A 42.972 42.972 0 0 1 46 66.05 Q 45 66.3 43.8 66.3 A 7.625 7.625 0 0 1 42.153 66.139 Q 39.4 65.527 39.4 62.6 Z M 72.5 22.8 L 72.5 65.6 A 5.938 5.938 0 0 1 72.179 65.717 Q 71.719 65.871 71 66.05 Q 70 66.3 68.8 66.3 A 7.506 7.506 0 0 1 67.204 66.146 Q 64.5 65.555 64.5 62.7 L 64.5 19.8 A 5.41 5.41 0 0 1 64.825 19.684 Q 65.185 19.566 65.712 19.433 A 25.952 25.952 0 0 1 66.05 19.35 A 9.267 9.267 0 0 1 67.637 19.12 A 10.939 10.939 0 0 1 68.3 19.1 Q 71.912 19.1 72.418 21.837 A 5.307 5.307 0 0 1 72.5 22.8 Z M 63.752 2.857 A 5.009 5.009 0 0 0 63.3 5 A 6.039 6.039 0 0 0 63.3 5.066 A 4.819 4.819 0 0 0 64.75 8.55 A 4.758 4.758 0 0 0 66.741 9.752 A 5.947 5.947 0 0 0 68.5 10 A 6.537 6.537 0 0 0 69.364 9.945 A 4.677 4.677 0 0 0 72.2 8.55 Q 73.6 7.1 73.6 5 Q 73.6 2.9 72.2 1.45 A 4.556 4.556 0 0 0 70.16 0.222 A 5.926 5.926 0 0 0 68.5 0 A 6.685 6.685 0 0 0 67.768 0.039 A 4.891 4.891 0 0 0 64.75 1.45 A 4.933 4.933 0 0 0 63.752 2.857 Z" />
<path transform="translate(100,10)" class="wufoo-letter" fill="#F4F4F4" d="M 54.5 69.1 L 45.9 69.1 L 45.9 37.7 L 8.6 37.7 L 8.6 69.1 L 0 69.1 L 0 0 L 8.6 0 L 8.6 30.4 L 45.9 30.4 L 45.9 0 L 54.5 0 L 54.5 69.1 Z M 93.962 22.908 A 28.25 28.25 0 0 0 87.9 22.3 A 27.977 27.977 0 0 0 84.157 22.542 A 21.548 21.548 0 0 0 78.8 23.95 A 26.073 26.073 0 0 0 78.185 24.213 Q 74.62 25.791 72.5 28.05 A 16.907 16.907 0 0 0 71.2 29.626 Q 70.377 30.747 69.589 32.148 A 37.623 37.623 0 0 0 68.15 35 A 19.011 19.011 0 0 0 67.583 36.389 Q 66.1 40.471 66.1 46 Q 66.1 57.1 71.1 63.7 A 14.968 14.968 0 0 0 74.763 67.149 Q 79.499 70.3 87.1 70.3 A 35.193 35.193 0 0 0 87.461 70.298 Q 90.158 70.27 92.53 69.828 A 21.005 21.005 0 0 0 98.1 68 Q 102.7 65.7 105 62 Q 109.2 55.2 109.2 47.2 A 46.054 46.054 0 0 0 109.163 45.344 Q 109.004 41.389 108.153 38.003 A 24.798 24.798 0 0 0 104.1 29.2 A 15.539 15.539 0 0 0 100.697 25.821 Q 97.852 23.763 93.962 22.908 Z M 87.9 28.8 A 14.237 14.237 0 0 0 84.62 29.161 A 10.968 10.968 0 0 0 81.35 30.5 A 11.041 11.041 0 0 0 78.551 32.925 A 10.01 10.01 0 0 0 77.3 34.9 Q 74.9 40 74.9 45.8 A 38.377 38.377 0 0 0 75.377 52.145 Q 77.274 63.403 86.724 63.786 A 16.668 16.668 0 0 0 87.4 63.8 A 14.181 14.181 0 0 0 90.566 63.463 A 10.667 10.667 0 0 0 93.9 62.1 Q 96.6 60.4 98 57.7 Q 100.4 52.7 100.4 46.8 A 38.377 38.377 0 0 0 99.923 40.455 Q 98.026 29.197 88.576 28.814 A 16.668 16.668 0 0 0 87.9 28.8 Z" />
</g>
</svg>
</div>
<div>
<svg version="1.1" class="wufoo-ad" id="wufoo-ad-3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<!-- dinosaur -->
<g class="trex" transform="translate(100.000000,0.000000) scale(0.0100000,-0.0100000) translate(-1055.000000,-10080.000000)"
fill="#000000" stroke="none">
<path d="M1055 10080 c-147 -31 -402 -180 -444 -259 -9 -16 -17 -81 -23 -175
l-8 -149 45 -48 c25 -26 45 -51 45 -54 0 -3 -11 -23 -25 -43 -32 -47 -32 -69
2 -104 30 -31 67 -36 97 -13 26 20 36 19 36 -4 0 -10 7 -24 15 -31 9 -8 12
-22 8 -41 -7 -37 19 -69 58 -69 26 0 27 -2 22 -33 -6 -40 16 -67 54 -67 14 0
41 -13 60 -30 18 -16 38 -30 43 -30 5 0 0 -16 -11 -35 -25 -41 -20 -60 21 -83
26 -15 30 -23 30 -59 0 -42 13 -63 51 -83 10 -6 19 -21 19 -33 1 -51 177 -156
240 -143 43 8 110 -14 110 -36 0 -26 36 -58 64 -58 15 0 26 -7 29 -20 3 -11
16 -24 29 -29 21 -8 24 -14 20 -45 -5 -40 9 -63 44 -76 18 -7 22 -16 21 -46
-1 -45 29 -74 79 -74 29 0 38 -6 61 -42 14 -24 65 -82 112 -130 47 -47 97 -99
112 -115 14 -15 41 -40 60 -54 l34 -26 -53 -106 -52 -106 -56 -20 c-54 -21
-91 -28 -274 -52 -230 -31 -255 -36 -314 -67 -32 -18 -66 -32 -77 -32 -10 0
-51 -32 -91 -71 -40 -39 -90 -83 -113 -97 -22 -14 -77 -58 -121 -97 -46 -41
-99 -78 -120 -85 -22 -7 -70 -29 -109 -48 -134 -67 -260 -86 -380 -57 -92 22
-131 19 -162 -11 -23 -23 -25 -31 -19 -80 l6 -54 -29 0 c-17 0 -34 -7 -39 -16
-7 -13 -15 -14 -48 -5 -21 6 -51 11 -65 11 -47 0 -52 -16 -38 -147 11 -110 14
-122 51 -180 53 -83 112 -136 184 -162 56 -21 71 -22 279 -18 237 4 278 11
550 88 157 45 322 59 692 59 l311 0 82 -61 c155 -114 229 -198 270 -304 13
-33 27 -65 32 -72 5 -6 16 -54 24 -105 13 -81 46 -195 134 -458 12 -36 37
-119 56 -185 19 -66 46 -156 59 -200 14 -44 25 -87 25 -96 0 -8 18 -53 41
-100 23 -46 55 -122 72 -168 38 -106 102 -201 282 -416 78 -93 156 -190 174
-215 l33 -45 -25 -3 c-36 -4 -275 78 -397 137 -94 46 -160 69 -407 145 -75 23
-98 42 -162 134 -27 38 -172 309 -216 402 -6 14 -16 34 -22 45 -34 62 -55 112
-64 158 -7 32 -24 68 -45 94 -19 23 -34 44 -34 47 0 4 -14 25 -30 48 -17 22
-30 45 -30 51 0 10 -65 113 -99 158 -11 14 -26 39 -33 55 -6 16 -24 47 -38 69
-113 173 -162 244 -177 256 -11 9 -47 15 -107 16 -50 0 -102 5 -116 11 -50 19
-130 24 -202 12 -99 -17 -130 -33 -126 -68 3 -24 19 -35 126 -90 l124 -64 24
-56 c33 -78 51 -109 97 -167 50 -64 38 -68 -80 -24 -108 39 -151 60 -214 106
-45 32 -54 34 -97 29 -26 -3 -105 -10 -177 -15 -104 -6 -140 -13 -180 -32 -62
-29 -121 -87 -130 -128 -11 -50 6 -61 94 -62 109 0 173 -13 186 -35 5 -10 25
-33 43 -50 35 -33 33 -44 -8 -44 -63 0 -212 -82 -226 -124 -3 -10 -34 -31 -68
-46 -93 -43 -139 -81 -171 -142 -48 -91 -15 -137 79 -109 23 6 68 19 102 28
l60 17 35 -27 c48 -36 125 -52 189 -38 28 6 97 34 153 61 139 69 192 83 291
78 113 -6 155 -28 177 -91 10 -27 35 -72 57 -100 22 -29 47 -66 56 -83 26 -54
92 -100 267 -189 92 -47 182 -99 198 -116 17 -17 58 -75 92 -130 96 -156 142
-190 291 -214 37 -6 93 -54 164 -141 30 -37 139 -102 334 -201 90 -45 206 -89
260 -98 25 -4 113 -30 195 -57 134 -46 162 -52 256 -56 126 -5 118 -12 148
123 10 47 22 89 25 92 3 4 54 -23 113 -59 60 -35 133 -75 163 -87 55 -22 282
-64 418 -77 81 -7 82 -9 56 -84 -12 -34 -15 -65 -10 -127 5 -63 3 -83 -6 -83
-17 0 -207 36 -293 55 -38 9 -128 20 -200 25 -88 6 -150 16 -190 30 -35 12
-98 24 -150 27 -53 3 -104 13 -125 23 -41 20 -152 54 -230 70 -30 7 -136 14
-236 17 -230 7 -261 -1 -349 -92 -33 -34 -74 -69 -91 -78 -52 -27 -141 -115
-163 -160 -13 -27 -21 -63 -21 -95 0 -46 3 -54 25 -64 22 -10 38 -5 135 45 61
32 117 57 126 57 8 0 27 -8 42 -17 23 -16 49 -18 214 -15 157 3 192 1 218 -13
18 -9 30 -18 28 -20 -29 -26 -157 -91 -216 -110 -104 -34 -119 -42 -134 -79
-7 -17 -59 -80 -115 -140 -120 -126 -163 -202 -171 -301 -5 -71 7 -101 45
-116 40 -15 73 4 138 78 32 36 80 82 106 103 42 33 54 37 87 33 43 -6 181 21
227 45 16 8 67 53 112 98 46 46 90 84 98 84 17 0 85 -27 85 -33 0 -2 -17 -16
-39 -30 -47 -31 -136 -173 -151 -242 -6 -26 -16 -57 -22 -68 -6 -11 -14 -52
-19 -91 -4 -42 -19 -96 -36 -131 -25 -55 -28 -70 -28 -177 0 -110 1 -118 24
-142 17 -18 35 -26 58 -26 37 0 53 20 118 151 45 89 81 139 101 139 26 0 111
89 133 140 12 27 32 90 45 140 22 81 30 97 84 158 32 37 73 88 91 114 17 26
39 52 49 57 10 5 46 5 88 -1 77 -10 68 -12 254 62 58 23 124 55 147 71 75 50
75 50 182 38 85 -9 113 -8 186 6 l86 17 38 -26 c50 -35 183 -175 296 -310 50
-60 119 -141 153 -180 35 -39 75 -89 88 -112 l24 -41 -20 -49 c-53 -124 -299
-447 -422 -555 -115 -102 -98 -97 -172 -45 -114 82 -229 105 -346 70 -145 -43
-282 -191 -284 -305 -2 -83 47 -108 144 -74 92 33 213 35 243 6 17 -17 -18
-63 -67 -88 -28 -14 -89 -53 -136 -88 -90 -65 -165 -119 -207 -147 -30 -19
-149 -48 -201 -48 -48 0 -101 -35 -109 -71 -7 -36 -16 -43 -76 -59 -72 -19
-128 -60 -193 -140 -133 -163 -158 -213 -152 -301 5 -70 26 -99 73 -99 17 0
103 21 191 46 131 38 172 46 237 45 94 -1 296 38 384 74 35 14 115 39 178 55
64 16 121 32 126 36 6 3 54 12 107 20 72 10 108 10 146 2 57 -12 129 0 211 37
99 43 140 123 155 304 7 78 14 105 45 166 45 88 102 166 135 182 31 15 43 39
80 164 42 144 111 239 369 513 100 105 144 159 151 185 16 57 12 154 -11 270
-16 83 -31 125 -69 196 l-48 90 5 90 c5 83 2 99 -30 200 -20 61 -45 142 -57
180 -12 39 -33 89 -47 113 -13 24 -23 45 -21 47 1 1 38 21 82 44 84 44 99 46
191 16 22 -7 81 -18 130 -24 50 -6 112 -18 139 -26 27 -8 81 -15 120 -15 39 0
98 -7 131 -15 79 -19 186 -19 260 0 37 10 62 12 68 6 6 -6 5 -33 -2 -73 -26
-150 2 -268 82 -342 24 -23 62 -75 85 -117 41 -74 46 -79 135 -133 134 -81
255 -126 339 -126 47 0 79 6 105 19 21 11 78 25 126 31 73 10 102 9 170 -4 45
-8 120 -18 167 -22 47 -3 110 -14 140 -24 30 -10 90 -25 133 -35 122 -27 164
-75 212 -240 23 -80 27 -113 32 -292 5 -181 4 -203 -10 -209 -9 -3 -54 10
-100 30 -72 31 -95 36 -161 36 -61 0 -86 -5 -124 -24 -112 -57 -199 -195 -209
-331 -5 -64 -3 -78 12 -95 27 -30 56 -25 165 32 l100 52 34 -17 c19 -9 42 -30
51 -46 8 -17 39 -46 68 -64 61 -39 114 -128 102 -169 -15 -50 -57 -90 -129
-122 -80 -37 -139 -84 -163 -130 -9 -17 -33 -51 -53 -76 -79 -95 -111 -203
-90 -304 9 -46 16 -57 36 -62 38 -10 71 3 168 65 l91 59 140 6 c110 4 154 2
206 -10 63 -15 66 -17 75 -52 9 -36 10 -37 64 -40 50 -3 60 1 100 31 25 19 62
40 83 48 39 14 44 21 91 116 28 58 61 221 51 256 -4 12 -28 92 -55 177 -47
152 -48 158 -54 320 l-6 165 41 115 c40 113 41 117 36 220 -5 104 -30 215 -75
345 -12 33 -30 99 -41 146 -19 84 -38 133 -127 314 -24 50 -53 128 -66 174
-41 157 -101 221 -205 221 -49 0 -53 2 -84 43 -18 23 -64 75 -103 115 -58 60
-89 82 -164 119 -52 25 -115 50 -140 57 -38 9 -46 15 -44 31 2 11 7 41 11 68
4 26 13 53 19 59 7 7 12 22 12 34 0 14 12 29 34 42 23 14 42 38 60 78 36 77
104 222 122 257 8 16 14 36 14 46 0 9 7 26 15 39 21 29 42 102 51 171 3 31 12
65 19 76 7 11 16 49 20 84 4 36 11 78 16 95 13 42 42 251 43 306 1 25 5 51 10
58 10 17 10 45 -4 212 -14 176 -26 279 -38 310 -7 18 -4 47 9 100 25 102 23
161 -6 274 -31 120 -33 219 -5 299 11 31 20 72 20 90 0 22 9 43 25 61 13 14
34 59 45 99 11 39 36 106 54 147 19 41 41 98 50 126 18 58 45 119 81 183 14
24 25 56 25 70 0 14 6 46 14 71 7 25 17 81 21 125 4 48 14 92 25 110 10 17 59
149 109 293 50 145 108 296 130 335 21 40 44 90 51 112 17 51 76 169 111 220
15 22 39 58 52 80 44 69 308 341 382 393 131 92 233 151 288 167 30 9 62 24
72 35 23 26 159 110 177 110 8 0 45 15 84 34 38 19 89 40 114 46 59 16 276
103 351 140 33 17 107 42 165 56 58 13 119 31 135 39 70 37 583 49 624 15 12
-10 51 -17 119 -21 73 -4 112 -11 141 -26 22 -11 60 -24 83 -28 24 -4 99 -31
166 -60 67 -29 133 -56 147 -60 13 -4 40 -18 59 -30 53 -36 226 -59 269 -35
20 10 51 78 51 111 0 38 -43 103 -121 185 -44 46 -79 87 -79 92 0 5 -17 21
-37 35 -21 14 -72 55 -112 91 -94 83 -217 153 -452 255 -142 62 -197 74 -497
108 -228 25 -243 26 -392 13 -85 -7 -247 -16 -360 -20 -115 -4 -218 -12 -235
-18 -73 -29 -449 -122 -490 -122 -17 0 -77 -13 -131 -29 -54 -16 -124 -34
-154 -41 -55 -13 -267 -104 -326 -141 -17 -10 -37 -19 -45 -19 -7 0 -42 -18
-78 -39 -36 -21 -82 -44 -102 -50 -19 -6 -52 -27 -72 -46 -20 -19 -58 -45 -84
-59 -145 -73 -550 -499 -738 -776 -43 -63 -88 -128 -101 -143 -13 -16 -27 -40
-31 -55 -3 -14 -19 -50 -35 -80 -15 -30 -28 -60 -28 -67 0 -11 -56 -92 -159
-231 -17 -22 -36 -54 -43 -70 -15 -34 -72 -102 -198 -233 -47 -49 -99 -104
-116 -122 -17 -19 -68 -65 -113 -104 -45 -38 -110 -97 -144 -130 -34 -33 -77
-68 -95 -77 -18 -10 -35 -25 -39 -35 -11 -32 -87 -104 -130 -123 -29 -13 -44
-27 -49 -44 -3 -14 -11 -26 -18 -26 -30 0 -355 -31 -381 -36 -64 -12 -252 -66
-300 -86 -261 -106 -488 -212 -558 -259 -18 -12 -51 -40 -74 -62 l-41 -40 -89
8 c-116 10 -535 6 -643 -6 -187 -21 -420 -97 -485 -158 -16 -16 -45 -33 -62
-39 -18 -6 -48 -22 -65 -35 -18 -13 -65 -41 -105 -62 l-72 -37 -73 29 c-118
48 -117 45 -103 393 10 237 12 419 6 610 -2 69 2 196 9 283 14 164 13 183 -24
452 -17 121 -60 271 -101 355 -55 112 -102 192 -126 218 -37 39 -46 59 -59
132 -6 36 -24 85 -38 109 -277 458 -271 450 -452 538 -69 33 -163 77 -210 98
-154 67 -165 74 -252 152 -48 43 -119 96 -160 118 -40 21 -82 47 -93 58 -32
30 -151 97 -245 137 -111 49 -174 86 -415 245 -362 239 -459 286 -600 291 -49
2 -108 -1 -130 -6z"/>
</g>
</svg>
</div>
Credits
Font sample: https://danmarshall.github.io/google-font-to-svg-path/
Dinosaur SVG: https://svgsilh.com/tag/dinosaur-1.html
So all started when I saw this numerical sequence onto a reddit post:
0 1 3 4 6 8 9 10 12 14 16 18 19 20 21 22 24 26 28 30 32 34 36 38 39 40 41 42 43 44 45 46 48 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 96 98 100 102 104 106 108 110 112 114 116 118 120 122 124 126 128 130 132 134 136 138 140 142 144 146 148 150 152 154 156 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 192 194 196 198 200 202 204 206 208 210 212 214 216 218 220 222 224 226 228 230 232 234 236 238 240 242 244 246 248 250 252 254 256 258 260 262 264 266 268 270 272 274 276 278 280 282 284 286 288 290 292 294 296 298 300 302 304 306 308 310 312 314 316 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 384 386 388 390 392 394 396 398 400 402 404 406 408 410 412 414 416 418 420 422 424 426 428 430 432 434 436 438 440 442 444 446 448 450 452 454 456 458 460 462 464 466 468 470 472 474 476 478 480 482 484 486 488 490 492 494 496 498 500 502 504 506 508 510 512 514 516 518 520 522 524 526 528 530 532 534 536 538 540 542 544 546 548 550 552 554 556 558 560 562 564 566 568 570 572 574 576 578 580 582 584 586 588 590 592 594 596 598 600 602 604 606 608 610 612 614 616 618 620 622 624 626 628 630 632 634 636 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753
And as the author pointed out:
If you ignore the 0, I figured that it starts adding 2 one time, then 1 one time then 2 two times, 1 two times... 2 2n times, 1 2n times.
That's why I thought it's pretty easy thinking of a program that will return element n of the numerical sequence. So I came up with the following code (in javascript):
function pot(x, y){
if(y == 0){
return 1;
}else{
return pot(x, --y) * x;
}
}
function f2(x){
var n = 0;
var count = 0;
var progCount = 0;
var sw = true;
var current = 1;
while(progCount < x){
if(sw){
current += 2;
}else{
current += 1;
}
count++;
if(pot(2,n) == count){
if(!sw){
n++;
}
sw = !sw;
count = 0;
}
progCount++;
}
return current;
}
However I still wasn't able to convert this into a math formula... What made me think a lot. Something in my head tells me there has to be a way to convert such basic programs into a math formula.
That's why I came here to ask the following 2 questions:
1) Do you know a way to create a math formula for the numerical
sequence?
2) Is there a generic way to create a formula by a given
code.
Thank you in advance.
Not sure if it will help you, but:
function fun(n) {
var result, geo;
geo = result = parseInt(Math.log(n + 1) / Math.log(2), 10);
result = ((Math.pow(2, geo) - 2) / 2) * 3;
var diff = n - (Math.pow(2, geo) - 1);
geo = Math.pow(2, geo - 1);
result += (diff >= geo) ? geo * 2 + (diff - geo) : diff * 2;
return result + 1;
}
var result = "";
for(var i = 1; i < 100; ++i) {
result += fun(i) + ", ";
}
console.log(result);
Tested it up to n = 100.
You could use this function for calculating any value.
function f(n) {
function pow2(n) { return Math.pow(2, n); }
var t = Math.floor(Math.log(n) / Math.log(2)),
delta = n - pow2(t);
return n < 2 ? n : pow2(t) + n - (delta < pow2(t - 1) ? pow2(t - 1) - delta : 1);
}
function f(n) {
function pow2(n) { return Math.pow(2, n); }
var t = Math.floor(Math.log(n) / Math.log(2)),
delta = n - pow2(t);
return n < 2 ? n : pow2(t) + n - (delta < pow2(t - 1) ? pow2(t - 1) - delta : 1);
}
var i;
for (i = 0; i < 200; i++) {
document.getElementById('tt').appendChild(document.createTextNode(i + ': ' + f(i) + '\n'));
}
<pre id="tt"></pre>
You can use String.prototype.match() with RegExp /\d+/g to get all numbers as an array, Array.prototype.reduceRight(), Array.prototype.unshift(), Array.prototype.reduce(); mathematically use addition, subtraction to determine sequence of difference between numbers, and rebuild the original set from the sequence derived from original set.
let pattern = `0 1 3 4 6 8 9 10 12 14 16 18 19 20 21 22 24 26 28 30 32
34 36 38 39 40 41 42 43 44 45 46 48 50 52 54 56 58 60 62
64 66 68 70 72 74 76 78 79 80 81 82 83 84 85 86 87 88 89
90 91 92 93 94 96 98 100 102 104 106 108 110 112 114 116
118 120 122 124 126 128 130 132 134 136 138 140 142 144
146 148 150 152 154 156 158 159 160 161 162 163 164 165
166 167 168 169 170 171 172 173 174 175 176 177 178 179
180 181 182 183 184 185 186 187 188 189 190 192 194 196
198 200 202 204 206 208 210 212 214 216 218 220 222 224
226 228 230 232 234 236 238 240 242 244 246 248 250 252
254 256 258 260 262 264 266 268 270 272 274 276 278 280
282 284 286 288 290 292 294 296 298 300 302 304 306 308
310 312 314 316 318 319 320 321 322 323 324 325 326 327
328 329 330 331 332 333 334 335 336 337 338 339 340 341
342 343 344 345 346 347 348 349 350 351 352 353 354 355
356 357 358 359 360 361 362 363 364 365 366 367 368 369
370 371 372 373 374 375 376 377 378 379 380 381 382 384
386 388 390 392 394 396 398 400 402 404 406 408 410 412
414 416 418 420 422 424 426 428 430 432 434 436 438 440
442 444 446 448 450 452 454 456 458 460 462 464 466 468
470 472 474 476 478 480 482 484 486 488 490 492 494 496
498 500 502 504 506 508 510 512 514 516 518 520 522 524
526 528 530 532 534 536 538 540 542 544 546 548 550 552
554 556 558 560 562 564 566 568 570 572 574 576 578 580
582 584 586 588 590 592 594 596 598 600 602 604 606 608
610 612 614 616 618 620 622 624 626 628 630 632 634 636
638 639 640 641 642 643 644 645 646 647 648 649 650 651
652 653 654 655 656 657 658 659 660 661 662 663 664 665
666 667 668 669 670 671 672 673 674 675 676 677 678 679
680 681 682 683 684 685 686 687 688 689 690 691 692 693
694 695 696 697 698 699 700 701 702 703 704 705 706 707
708 709 710 711 712 713 714 715 716 717 718 719 720 721
722 723 724 725 726 727 728 729 730 731 732 733 734 735
736 737 738 739 740 741 742 743 744 745 746 747 748 749
750 751 752 753`;
let arr = pattern.match(/\d+/g);
let sequence = [];
let first = arr.reduceRight((a, b) => {sequence.unshift(a-b); return b});
sequence.unshift(+first);
console.log(sequence);
let rebuild = [sequence[0]];
sequence.reduce((a, b) => {rebuild.push(a+b); return rebuild[rebuild.length-1]});
console.log(rebuild);
plnkr http://plnkr.co/edit/DrVDjDTOTNzCJ0sSEk3q?p=preview
when I analyze the results the following applies:
when n is power of 2, the result is always equal to n*1.5
when n is power of 2, result of next n are added with 2 with maximum of the difference of result-n-1, eg. result of n=8 equals 12 and 8 is power of 2, in this case the following n => result are 8=>12, 9 => 14, 10 => 16, 12 => 18. The other values until next n is equal power are added with 1
Because of this formula will be like as follow:
Math.pow(2, Math.floor(Math.log2(n)))*1.5+n%Math.pow(2,Math.floor(Math.log2(n))) + (n<Math.pow(2, Math.floor(Math.log2(n)))*1.5-1 ? x-Math.pow(2, Math.floor(Math.log2(n))) : Math.pow(2, Math.floor(Math.log2(n)))*0.5-1)
or as function:
var fn = function (n) {
var r0 = Math.pow(2, Math.floor(Math.log2(n)));
var r1 = r0 * 1.5 + n % r0;
var r2 = n < r0 * 1.5 - 1 ? n - r0 : r0 * .5 - 1;
return r1 + r2;
}
following loop will show the same result as numerical sequence
for (i = 1; i < 499; i++) {
console.log(fn(i));
}
you can try polynomial interpolation
In numerical analysis, polynomial interpolation is the interpolation of a given data set by a polynomial: given some points, find a polynomial which goes exactly through these points.
https://en.wikipedia.org/wiki/Polynomial_interpolation
Try it out with wolframalpha
http://www.wolframalpha.com/input/?i=interpolate+(1,1)+(2,3)+(3,4)+(4,6)+(5,8)+(6,9)+(7,10)+(8,12)+(9,14)+(10,16)
It gives you this function ( just copy and paste in javascript, it gaves you the solution between x[1,10] )
f(x) = -x^9/60480+(37 x^8)/40320-(107 x^7)/5040+(767 x^6)/2880-(5677 x^5)/2880+(50539 x^4)/5760-(693913 x^3)/30240+(110741 x^2)/3360-(5897 x)/280+5
x is the position of your list
f(x) is your solution
f(1) = 1
f(2) = 3
f(3) = 4
..
f(10) = 16
f(x>10) = is probably crap, because there are no known data points
Greetings
For given font, and given string, how to get polygon points like these in the picture below, in JavaScript?
(I am aware of related questions on SO, but they are for Python or other languages/environments; I would like JavaScript only solution, if possible)
EDIT: Following up #Roman's the answer:
Using typeface.js online tool, I converted a TrueType font to typeface.js format. Each letter is represented similar to this: (here is representation of letter d)
"d": {
"x_min": 135.640625,
"x_max": 792.171875,
"ha": 928,
"o": "m 135 998 l 330 998 q 792 499 763 933 q 330 0 763 65 l 135 0 l 135 998 m 330 151 q 648 499 635 211 q 330 846 635 786 l 287 846 l 287 151 l 330 151 "
},
The key part of typeface.js code for rendering a letter based on this format is:
switch(action) {
case 'm':
ctx.moveTo(outline[i++], outline[i++]);
break;
case 'l':
ctx.lineTo(outline[i++], outline[i++]);
break;
case 'q':
var cpx = outline[i++];
var cpy = outline[i++];
ctx.quadraticCurveTo(outline[i++], outline[i++], cpx, cpy);
break;
case 'b':
var x = outline[i++];
var y = outline[i++];
ctx.bezierCurveTo(outline[i++], outline[i++], outline[i++], outline[i++], x, y);
break;
}
Some work has already been done for typeface.js, a javascript library that replaces regular text with "canvas rendered one" (so you can use arbitrary font-faces).
typeface.js accomplishes this by using font definition data, which essentially holds the drawing instructions for each glyph. The data for the glyph "A" might look like this:
m 253 638 l 379 949 q 394 945 387 946 q 409 944 401 944 q 443 949 428 944
q 565 629 525 733 q 673 359 605 526 q 822 0 740 192 q 773 3 804 0 q 736 7
743 7 q 686 4 709 7 q 650 0 664 1 q 588 199 609 137 q 532 355 567 261 l
370 355 l 210 355 l 159 205 q 127 110 142 161 q 99 0 112 59 l 43 6 q 6 3
20 6 q -14 0 -8 0 q 74 211 29 105 q 155 403 119 317 q 253 638 191 490 m
370 422 l 502 422 l 371 760 l 240 422 l 370 422
(I inserted newlines).
This string is a sequence of drawing operations with their respective numerical parameters. For example "m 253 638" corresponds to "move to x:253 y:638" and "l 379 949" being "draw line to x:379 y:949". etc, etc..
You should have a look at the source here:
http://bazaar.launchpad.net/~davidchester/typeface.js/trunk/view/head:/js/typeface.js
You could adapt that renderer to extract your poligons. The major trick here is to let this page do the hard work for you and create the font definitions.
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: http://raphaeljs.com/australia.html.
I converted the SVG file to Raphael JS in here http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php 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..
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:
<!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>
The biggest thing that the converter did was pull that the path data from the SVG files that you fed it. My suggestion is to use that data, but with other code.
In order to simplify and keep things as DRY as possible, you will want to create two objects. One will contain path data for each county and the other will contain counties attribute data. With these objects you can run a simple for loop and build your map that way. I hope the following code helps.
note that pathData represents the path strings such as '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>
The biggest problem with your code is that I don't see anywhere where you actually create the paper object. You simply use the variable paper assuming that it's a Raphael paper object but from your code it actually looks like it's undefined.
You need to create a paper object:
var paper = Raphael('paper');
If you look at Jon Black's answer he calls his paper countyMap and it's initialized on this line:
var countyMap = Raphael("canvas", 640, 480);
The paper doesn't have to be called paper and the variable paper is not a special magic variable that will automatically create a Raphael paper object. You need to create the paper object yourself and you can name it anything you like.
I strongly encourage that you write your code by using another name (like canvas for example) instead of paper for the Raphael paper object just to get comfortable with how things really work and avoid confusing yourself.
I was looking through some of the files used in Vexflow and I'm trying to add new glyphs for the score however, I don't know what code is being used here in the vex.flow.font.js file:
Vex.Flow.Font = {"glyphs":{"vb":{"x_min":0,"x_max":428.75,"ha":438,"o":"m 262 186 b 273 186 266 186 272 186 b 274 186 273 186 274 186 b 285 186 274 186 280 186 b 428 48 375 181 428 122 b 386 -68 428 12 416 -29 b 155 -187 329 -145 236 -187 b 12 -111 92 -187 38 -162 b 0 -51 4 -91 0 -72 b 262 186 0 58 122 179 "}
To my understanding, the code above is referenced by another file (glyph.js) to render an svg. Any help would be greatly appreciated, thank you :)
Vex.Flow.Font = {"glyphs": {
"vb": {
"x_min": 0,
"x_max": 428.75,
"ha": 438,
"o": "m 262 186 b 273 186 266 186 272 186 b 274 186 273 186 274 186 b 285 186 274 186 280 186 b 428 48 375 181 428 122 b 386 -68 428 12 416 -29 b 155 -187 329 -145 236 -187 b 12 -111 92 -187 38 -162 b 0 -51 4 -91 0 -72 b 262 186 0 58 122 179 "}}}
glyphs is a list of glyphs, mapping them from their code to their info. So vb is a glyph code, and the map with four values is its description. x_min and x_max describe horizontal metrics. x_min set to zero means start drawing the glyph at the current cursor point, and the value of x_max specifies cursor's movement to the right. I have no idea what is ha and what does it do. o is the outline of the glyphs to be rendered. It is described in a format similar to SVG paths. For the start, m 262 186 means move to pixel (262, 186), b 273... means draw a bezier curve with these points, etc.