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
Related
I'm trying to add an SVG inside an SVG so that I can manipulate the fill colors of both of them.
For example, if I have an SVG of Square with path fill of Red, and I want to add SVG of a circle with color blue I can do it by writing 2 SVG with position absolute, but I want the circle SVG inside the Square SVG multiplying itself to the fill the Square SVG space limiting itself to Square SVG's area only.
Like this.
Which I did achieve by adding an image as a pattern inside that Square SVG. Like:
<svg class="blowse" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 46.000000 66.000000" preserveAspectRatio="xMidYMid meet" >
<g transform="translate(0.000000,66.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<pattern id="blowse_pattern_img" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image id="blowse_img" href="https://harryatwork.com/vinay/images/club.png" x="0" y="0" width="50px" height="50px"></image>
</pattern>
<path style="fill:red;" class="path_blowse" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
<path style="fill:url(#blowse_pattern_img)" class="path_blowse_img" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
</g>
</svg>
However, using JQuery I can manipulate the Parent SVG's fill but I cannot do anything about the image that I did just added.
So to Manipulate the color of the child, I need it to be an SVG instead of an Image.
So, I need to add another path of that shape along with the parent path. like :
<svg class="blowse" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 46.000000 66.000000" preserveAspectRatio="xMidYMid meet" >
<g transform="translate(0.000000,66.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path class="path_blowse" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
<path xmlns="http://www.w3.org/2000/svg" d="M5656 11870 c-498 -45 -890 -217 -1275 -559 -403 -360 -677 -1053 -698 -1766 -11 -366 36 -549 248 -980 161 -328 202 -435 165 -435 -27 0 -153 43 -311 105 -327 130 -593 184 -1015 204 -340 17 -465 -6 -714 -131 -207 -104 -385 -237 -592 -443 -242 -241 -393 -448 -524 -720 -169 -349 -207 -506 -217 -886 -9 -328 17 -544 87 -744 38 -108 183 -418 247 -530 358 -624 949 -1041 1653 -1165 159 -28 479 -38 642 -20 531 58 1102 312 1543 684 156 132 362 348 474 498 24 32 144 207 267 390 149 221 230 333 242 333 26 0 33 -60 26 -250 -12 -385 -35 -617 -85 -870 -143 -725 -468 -1336 -988 -1855 -181 -181 -280 -265 -440 -371 -268 -178 -520 -276 -1206 -468 -471 -132 -622 -190 -709 -274 -43 -41 -75 -112 -58 -129 14 -14 479 -27 1312 -39 1056 -14 5327 -7 5545 10 308 23 350 44 296 149 -45 86 -120 127 -316 172 -414 94 -887 235 -1170 348 -376 151 -662 347 -970 663 -436 449 -744 1015 -879 1619 -52 236 -112 621 -146 938 -20 197 -27 422 -12 422 13 0 136 -168 282 -386 263 -392 453 -616 720 -848 515 -447 1168 -722 1765 -743 363 -12 718 68 1070 242 267 132 454 266 657 472 204 206 327 383 473 678 109 219 146 325 177 497 21 113 23 154 23 488 0 306 -3 383 -18 479 -33 205 -86 358 -212 613 -128 259 -262 444 -461 638 -185 180 -312 270 -539 380 -313 153 -572 207 -933 197 -314 -9 -487 -53 -857 -217 -210 -93 -349 -150 -365 -150 -32 0 17 130 174 463 169 356 219 499 251 712 47 316 -20 800 -167 1195 -119 320 -280 574 -499 785 -361 349 -729 524 -1240 591 -145 18 -575 27 -723 14z"/>
</g>
</svg>
Which did nothing.
Hope I was clear in explaining my query.
Working FIDDLE
I need an SVG instead of an image there.
Any help is greatly appreciated.
The club path is far away outside the svg canvas. Besides is much bigger than the path you need to fill with the pattern.
In order to see the club I'm putting it in a symbol with a viewBox and use the symbol with the position (x,y) and the size (width, height) I want. (the red club in the next example)
I also can use the symbol to build a pattern and use the pattern to fill the shape.
<svg class="blowse" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 46.000000 66.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,66.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path fill="url(#blowse_pattern_img)" class="path_blowse" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
<use href="#club" x="100" y="400" width="30" height="30" fill="red" />
</g>
<defs>
<pattern id="blowse_pattern_img" patternUnits="userSpaceOnUse" width="30" height="30">
<use href="#club" width="20" height="20" fill="gold" />
</pattern>
<symbol viewBox="720 1440 10530 10530" id="club">
<path xmlns="http://www.w3.org/2000/svg" d="M5656 11870 c-498 -45 -890 -217 -1275 -559 -403 -360 -677 -1053 -698 -1766 -11 -366 36 -549 248 -980 161 -328 202 -435 165 -435 -27 0 -153 43 -311 105 -327 130 -593 184 -1015 204 -340 17 -465 -6 -714 -131 -207 -104 -385 -237 -592 -443 -242 -241 -393 -448 -524 -720 -169 -349 -207 -506 -217 -886 -9 -328 17 -544 87 -744 38 -108 183 -418 247 -530 358 -624 949 -1041 1653 -1165 159 -28 479 -38 642 -20 531 58 1102 312 1543 684 156 132 362 348 474 498 24 32 144 207 267 390 149 221 230 333 242 333 26 0 33 -60 26 -250 -12 -385 -35 -617 -85 -870 -143 -725 -468 -1336 -988 -1855 -181 -181 -280 -265 -440 -371 -268 -178 -520 -276 -1206 -468 -471 -132 -622 -190 -709 -274 -43 -41 -75 -112 -58 -129 14 -14 479 -27 1312 -39 1056 -14 5327 -7 5545 10 308 23 350 44 296 149 -45 86 -120 127 -316 172 -414 94 -887 235 -1170 348 -376 151 -662 347 -970 663 -436 449 -744 1015 -879 1619 -52 236 -112 621 -146 938 -20 197 -27 422 -12 422 13 0 136 -168 282 -386 263 -392 453 -616 720 -848 515 -447 1168 -722 1765 -743 363 -12 718 68 1070 242 267 132 454 266 657 472 204 206 327 383 473 678 109 219 146 325 177 497 21 113 23 154 23 488 0 306 -3 383 -18 479 -33 205 -86 358 -212 613 -128 259 -262 444 -461 638 -185 180 -312 270 -539 380 -313 153 -572 207 -933 197 -314 -9 -487 -53 -857 -217 -210 -93 -349 -150 -365 -150 -32 0 17 130 174 463 169 356 219 499 251 712 47 316 -20 800 -167 1195 -119 320 -280 574 -499 785 -361 349 -729 524 -1240 591 -145 18 -575 27 -723 14z" />
</symbol>
</defs>
</svg>
Embed the inner SVG directly:
<svg class="blowse" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 46.000000 66.000000" preserveAspectRatio="xMidYMid meet" >
<g transform="translate(0.000000,66.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<pattern id="blowse_pattern_img" patternUnits="userSpaceOnUse" width="100%" height="100%">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 500 500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>
</pattern>
<path style="fill:red;" class="path_blowse" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
<path style="fill:url(#blowse_pattern_img)" class="path_blowse_img" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
</g>
</svg>
In this way, it can be controlled as a separate item with its own context.
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
I'm working with SVG file. I was embed SVG file through object tag html.
Like this:
<object id="map" type="image/svg+xml" data="the-file-has-same-domain"></object>
How can I detect what area when I clicked by Javascript or any library support for this.
Thanks!!!
Since your file is on the same domain (if we trust your fake-name), then you can simply access its document, and attach listeners from your main page:
// wait for your <object> is loaded
document.getElementById('map').onload = e => {
const doc = map.getSVGDocument(); // that's the inner document
doc.addEventListener('click', your_handler);
};
Unfortunately StackSnippet's null-origined iframes don't allow access to any inner document, so here is a jsfiddle.
You can do this if you use inline svg directly.
Then you can add a handler onClick from javascript and fetch the path details using event.target in function
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" onClick="goHome();">
<g id="layer101">
<path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
<path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
<path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
<path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
</g>
</svg>
goHome = function(ev) {
//path details
console.log(ev.target);
}
To get mouse coordinates when clicked on an element use e.clientX and e.clientY
document.querySelector('#map').addEventListener('click', function (e) {
console.log('X coords: ' + e.clientX + ', Y coords: ' + e.clientY);
});
#map {
display: block;
width: 100px;
height: 100px;
background: red;
}
<object id="map" type="image/svg+xml" data="the-file-has-same-domain"></object>
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 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.