filling space in svg width path - javascript

I'm making an svg using a path and I'm having issues getting the path to fill the space within the svg itself.
Here's an example
https://jsfiddle.net/k44y4b9L/2/
As you can see, the svg is viewBox is set to the same width as the last point in the svg, both are 1366
To my thinking, that means that the path should take up the full width of the svg, but it isn't.
In my actual site, the svg is given the width of the window
<svg height="119" width="1366">
<path...
Can somebody explain why the svg path is not filling the space provided and how to get it to do so?
Note, the svg is the full width of the screen, it is just the path which falls short.
I make the svg via the below script, but I'm thinking the issue is not in the script because the last value in the path is equal to the total width of the svg
for(let i = 0; i< points.length; i++) {
track = track + (points[i].distance / totalDistance) * layout.width + ' ' +
((maxHeight - points[i].height) / rangeHeight ) * svgHeight + ' L ';
}
return {
track: track = track + layout.width + ' ' + rangeHeight + ' L 0 ' + rangeHeight
}
});


I suspect the script is the problem. The last data point in the plot is at
L 1314.6117266886256 77.66199637121403
before the the graph dives down screen to
L 1366 1535.7468222475618
and back to
L 0, 1535.7468222475618
so the fill will work. Currently the plummet in the plot is clipped by the view port so it looks like it's vertical and as if the graph cuts off at x = 1314, whereas it doesn't and continues to x=1366. This can be demonstrated by changing the view port height to several thousand and removing the height attribute on the svg tag.
Why the script doesn't plot a data point at 1366 is unclear - I would expect the distance represented by points[points.length-1].distance would be the same as totalDistance. Perhaps some judicious logging will clear up the matter.
Note that use of the unscaled rangeHeight value (unrelated to svg dimensions) can be replaced by svgHeight when completing path data as for example:
return {
track: track = track + layout.width + ' ' + svgHeight + ' L 0 ' + svgHeight
}


That's because you are slicing your path on the y axis.
y values go down to 1535, and your viewBox stops at 120. You then have all the way down to y:1535 in diagonal that goes from x~=1320, y=120 to x:1366, y:1535 that get hidden in your image, but which is still part of the BBox.
So you just have to fix the y value in your viewBox and to add preserveAspectRatio="none" in order to stretch your path.
svg{ border: 1px solid}
<svg width="100%" height="119.1" viewbox="0 0 1366 1535.7468222475618" preserveAspectRatio="none"><path fill="blue" d="M 0 93.6895418127642 L 2.665123367659168 94.90951776684683 L 4.2895612672752135 95.15586786527933 L 5.204138083194765 95.52176851940251 L 7.7378161096114955 95.4968606554659 L 11.796534397512328 94.86507944410728 L 14.9873069580359 95.05820497877262 L 16.756067470338387 94.77967748096344 L 18.421891072530475 95.16810832132134 L 19.88958479564756 95.45663219779111 L 22.634942167376725 95.88126715542622 L 26.184890456874864 95.57351845480213 L 28.587916433168083 96.01081520391392 L 31.199511238479634 95.3382488653906 L 33.38809911206268 94.66131221953057 L 36.617723255618394 93.85346911989356 L 37.65906382915835 93.50822794622684 L 43.29465530719694 91.94007945222616 L 45.716759684221024 90.95158454736118 L 46.23418125941004 90.65919298964516 L 49.255795487153705 91.11934266396851 L 53.89271252054174 91.37524000592352 L 59.55509369824439 89.76761365783392 L 74.71239046154567 86.85588402071572 L 76.3156550476323 86.59673916397207 L 77.76213912056488 87.33267957936282 L 79.15299880688353 86.79470361982295 L 80.95990641532082 84.97713718709238 L 82.90222743583448 85.71152051204957 L 87.53337570384602 84.31175142512346 L 115.9785644393456 75.83435851234935 L 132.00356781551105 70.47999085360084 L 133.58937876896545 70.10454286234689 L 133.95732529432212 70.25745852331632 L 136.67945834452576 70.3768657869749 L 138.5576884937648 70.56735065592682 L 139.82273892809195 70.03075226943392 L 142.9898781345473 68.5799541971048 L 145.95202507835424 69.29762420428824 L 150.50894185058112 67.43118085972195 L 154.62159634599612 66.68568032640702 L 169.53919747246763 59.59184397837285 L 172.34408940163092 59.76661681324125 L 179.41323957617433 54.23712395717909 L 183.18452899857706 55.40387210153476 L 184.0517824411765 55.29838465800259 L 198.08060711429832 48.21844941522161 L 201.9903786283023 48.704890678403935 L 202.48752991273093 48.49738248187275 L 204.34662118685745 47.41276016266789 L 205.01124027256498 46.990440798310104 L 205.49659566406584 46.518242556207255 L 206.8418394859621 46.08028132180215 L 210.03951819735218 43.87559690008509 L 212.338584260495 42.21410052551513 L 215.13428901896637 40.00206616499397 L 216.22883500849494 39.271020348363514 L 217.94960418760922 38.15087869545533 L 218.56074500765445 38.19452386431356 L 221.3801994932312 36.592252387318595 L 223.30002523442425 36.93992956021575 L 224.10404241236913 36.791248671214916 L 224.71071496536376 36.47391294902361 L 228.41149727226718 36.85678910758367 L 228.75425359524786 36.894877630415635 L 230.54735298302236 36.25746535877406 L 233.78344097837038 34.139991745198586 L 234.93588064029692 33.38848346925461 L 238.5468723380036 33.624154282406906 L 239.31506808990252 33.60244405886698 L 243.79898809077113 32.684517066199525 L 250.6593160723187 32.676748323928244 L 252.17318560940996 32.304214919317666 L 254.00342960748807 32.59333023011129 L 258.2276619957761 32.72851732000699 L 259.97230778182046 33.099291548809354 L 265.4090892850939 33.75428998833749 L 267.0635669446066 33.73377259828705 L 270.52300329337686 33.192374901844545 L 285.48309832360417 30.122683953308066 L 290.5227384353614 29.85905415149619 L 295.25893355417685 30.958678966322548 L 301.4502335605041 31.136185693487686 L 306.8208117842427 31.57304886360337 L 339.47192403440647 28.060679864829428 L 342.1449661049091 27.794486617474085 L 353.9323391224938 25.37009416334379 L 356.6018605192946 24.82921719693516 L 359.64767048445555 24.181681318588037 L 362.57780656478553 23.755884739419958 L 363.65249511822043 23.3515193287727 L 368.2120398933081 21.942193470917374 L 370.35649976050325 21.69368310986994 L 373.99343835721373 20.80390792873542 L 376.414161449733 20.297356339910245 L 376.787157865503 20.246882130423856 L 377.6205065246026 20.100203758158866 L 380.0060469073525 19.644098789164627 L 382.2442022192896 18.49717114163059 L 383.9720543154379 17.954255448859406 L 384.9379270536342 17.582345963166865 L 387.21871501577016 17.46355040252647 L 398.5817348795498 15.744955757669509 L 403.7694228757952 14.455680750218848 L 407.08599127831803 13.303027478807884 L 410.1646026186511 13.273746609992454 L 429.2129721545638 9.461786592069828 L 447.0134203224187 8.161005374319608 L 448.60778248355723 7.645924358835366 L 468.6327826995717 7.981351456431004 L 475.32330845699545 5.70710018647154 L 483.34724799131357 2.4489215203781627 L 498.8456289249868 5.760337773520393 L 499.67912261812467 5.537475774374966 L 505.7973512825049 7.83719544468438 L 511.9666885977891 4.8031686551094674 L 517.9090181061771 0 L 526.388911295637 3.746907359885273 L 530.0474682624499 5.531335897259933 L 533.6831685801574 6.7096555767811905 L 538.4312447068208 4.437323229797208 L 542.5155236808126 3.5935567127955332 L 548.0622665277615 6.694405957766618 L 555.368489359055 7.413294398771164 L 557.4986740798215 7.816979560350507 L 558.9051301230962 8.424058923225747 L 562.2743827363502 9.91972842233779 L 564.8259341029334 11.289955040436165 L 565.8119813104888 11.926112522978205 L 568.9568656616074 14.030254441031873 L 573.1827172987125 14.828825421693766 L 578.3785767455453 15.334117293663994 L 584.1515464253678 14.064073191170861 L 586.1728574199217 14.122703467730394 L 587.2977423590918 14.251599444958874 L 588.3738791103115 14.600886272848552 L 590.7752256255633 15.337302161105766 L 591.0649543950095 15.414279874259574 L 593.2364141814209 16.467370584845725 L 596.378658509884 18.804552245216243 L 598.6429172973552 20.07477362660744 L 601.1344308324669 20.1395124966016 L 604.9756672147997 19.424378997691218 L 609.6324294777376 19.278439992334462 L 614.1807345210082 18.854040532043992 L 616.177704194166 18.915110878874664 L 622.3401206580357 18.813564909394568 L 624.6527893862285 18.346742657988273 L 625.7190437085152 18.03998714571526 L 629.2447187238298 18.108664956966145 L 632.0310154758156 19.41404894077666 L 634.4641695555704 21.67012042804931 L 635.481932256133 22.393744083780668 L 638.4559888575782 23.080603444933192 L 641.510901615907 25.468831984343865 L 644.6931156109835 27.06003438171469 L 646.700214681451 27.255658620829642 L 648.7975316593405 26.457704119074755 L 650.0947372687093 26.249000064662255 L 654.2635056995479 26.766110291551744 L 658.6312548121922 26.878056186067017 L 660.1225340577158 26.71879173768677 L 663.628713091155 26.455229068371217 L 667.4946606070508 26.163112801685955 L 669.9542581756274 27.303327863722238 L 677.0127917345734 27.13578451581777 L 684.8122456915586 28.020605418766433 L 689.7482589536 27.51562718982995 L 714.3428542269559 28.408487848798977 L 720.6124214544949 31.549115632008036 L 727.2114778228455 35.106569937273385 L 762.1185692296282 46.632774046529136 L 767.2524456752058 48.29894920704799 L 773.5629096514042 49.16365256299842 L 783.0820469695753 52.066317725578976 L 784.0033625779054 52.25121726808711 L 784.6107537596346 51.95598265202461 L 788.0726344863083 52.668067310098444 L 791.5166114383851 52.6930444750226 L 793.3492301858332 52.512724089873835 L 794.5698293956268 52.935715239517755 L 796.2374281679132 52.97432361876515 L 798.9351287733825 53.31397459181399 L 802.5416921350363 55.960507656235045 L 805.5781878322663 56.881157044145716 L 814.3287318917567 56.854790401935716 L 817.0000157817514 58.83045675263215 L 821.5595291296794 60.738787981228306 L 832.9692771556078 65.43466237763657 L 837.5475956866258 66.86841046711476 L 847.7564099756963 67.6362510578752 L 864.5970910744117 67.91874478579993 L 898.6022006693901 78.3141373971703 L 924.1257060529387 81.34734144959816 L 936.115659825146 81.66373244937131 L 952.5395355813768 83.38818295913383 L 966.8920484489237 87.02866001977004 L 985.1491169788279 86.48653833949837 L 991.5416555933199 90.11737233685511 L 1004.3271437352008 92.04441229714145 L 1017.3658624262649 89.70632037960343 L 1023.3508172604021 89.90279816847024 L 1027.4687085173787 91.99284340733254 L 1028.4793059461576 92.05061541340609 L 1028.952486787462 92.09072831613449 L 1031.3174185577661 92.34885505963966 L 1033.4641770257906 93.69325656737531 L 1039.1505247860423 96.64667935969715 L 1043.060166795977 98.41294343913069 L 1046.8703354819286 100.22445436749487 L 1056.7636732583996 99.70763382706583 L 1066.819054032742 97.95914505968518 L 1070.4724832649208 96.66304486664104 L 1077.3502579049352 95.73100889092025 L 1083.694606401379 94.89703781395599 L 1092.3619875058187 95.05023846894626 L 1100.602904117155 91.2927544872155 L 1104.0257739645165 88.54922961637493 L 1116.543854149713 87.01515463815245 L 1127.5402475931287 87.59694953569955 L 1135.6793875687938 85.8789496263917 L 1146.6435673479255 88.70567080072436 L 1156.7145425214592 91.49476558759186 L 1177.0857006728386 104.1 L 1179.8523304540697 103.72101909178603 L 1180.048674351256 103.74069081403994 L 1185.106175192035 102.6473473570614 L 1210.6440269758577 95.52478673869703 L 1219.6809408711752 93.73918640283988 L 1240.518031099135 90.02964304369375 L 1280.3576814932712 82.33568355595172 L 1294.6106145311173 80.6754493779673 L 1314.6117266886256 77.66199637121403 L 1366 1535.7468222475618 L 0 1535.7468222475618"></path></svg>

Related

Dynamically color svg elements on canvas

I am trying to draw this chess piece to a Canvas element, and I want to give it a custom fill color.
I tried the following to add the svg to DOM and it worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
window.onload = function(){
const color = "#02B09F"
const svg_string = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"><g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:${color}; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"><path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:${color}; stroke-linejoin:miter;" id="path6570"/><path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:${color};fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/><path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:${color}; stroke:${color};"/><path d="M 20,8 L 25,8" style="fill:none; stroke:${color}; stroke-linejoin:miter;"/><path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:#ffffff;"/><path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:#ffffff;"/></g></svg>`
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
document.querySelector('body').appendChild(doc.firstChild)
}
</script>
</html>
but using drawImage with doc.firstChild didn't work, it gave me the following error:
CanvasRenderingContext2D.drawImage: Argument 1 could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
the code:
const color = "#02B09F"
const svg_string = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"><g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:${color}; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"><path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:${color}; stroke-linejoin:miter;" id="path6570"/><path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:${color};fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/><path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:${color}; stroke:${color};"/><path d="M 20,8 L 25,8" style="fill:none; stroke:${color}; stroke-linejoin:miter;"/><path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:#ffffff;"/><path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:#ffffff;"/></g></svg>`
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
let canvas = document.querySelector('canvas');
canvas.width = 100;
canvas.height = 100;
let cx = canvas.getContext('2d');
cx.drawImage(doc.firstChild, 0, 0)
any idea how to fix it, or if you know a better way to color SVGs using javascript

just make a function and replace the colors. test code here
function renderChess(white = '#FFFFFF', black = '#000000'){
return '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"> <g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:' + black + '; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"> <path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:' + black + '; stroke-linejoin:miter;" id="path6570"/> <path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:' + black + ';fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/> <path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:' + black + '; stroke:' + black + ';"/> <path d="M 20,8 L 25,8" style="fill:none; stroke:' + black + '; stroke-linejoin:miter;"/> <path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:' + white + ';"/> <path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:' + white + ';"/> </g> </svg>';
}
window.onload = function(){
const color = "#02B09F"
const svg_string = renderChess(color, 'black');
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
document.querySelector('body').appendChild(doc.firstChild)
}

Splitting any SVG path into pieces without changing the shape

I am new to SVG manipulation using javacript. I would like to split any type of SVG path into N number of segments, so that the original shape stays same but with additional points added to the path. I was successfully able to convert a single cubic curve into N number of points using the Bezier JS plugin using the .getLUT(steps) function.
And I am able to convert any SVG element into path using Flatten.js.
Here in the link http://bl.ocks.org/bycoffe/18441cddeb8fe147b719fab5e30b5d45 a path is splitted seamlessly, But I'm struggling to achieve the same using an existing path in an SVG element in the DOM.
Here is my code:
...
<svg id="svg" style="border: 1px solid" width="500" height="500">
<!--The below is an actual rectangle drawn in illustrator-->
<rect x="0.5" y="0.5" width="234" height="125" style="fill:#fff"/>
<path d="M317,107V231H84V107H317m1-1H83V232H318V106Z" transform="translate(-83 -106)"/>
</svg>
...
<script type="text/javascript">
//this converts the <rect> and <path> into a more clean path d attribute
//the above code produces the below d attribute points
//for <rect> - M0.5, 0.5 L 234.5,0.5 L 234.5, 125.5 L 0.5, 125.5 L 0.5, 0.5 Z
//for <path> - M234, 1 L 234, 125 L 1, 125 L 1, 1 L 234, 1 m 1, -1 L 0,0 L 0, 126 L 235, 126 L 235,0 Z
flatten(document.getElementById('svg'));
</script>

I was able to achieve the result by getting teh total length of the path using the function document.getElementById('#path').getTotalLength(); and generating a new d points using document.getElementById('#path').getPointAtLength(i); with the following code
the_path = document.getElementById('#path');
let l = the_path.getTotalLength();
let p = the_path.getPointAtLength(0);
let d = `M${p.x} ${p.y}`;
for(let i = (l/num);i<=l;i+=(l/num)){
p = the_path.getPointAtLength(i);
d += `L${p.x} ${p.y}`;
}

encodeURIComponent not returns svg

Hello Guys encodeURIComponent not returns my svg.
var svg ='<svg id="vgroovFrame" xmlns="http://www.w3.org/2000/svg" width="576" height="720"><defs> <pattern id="matpattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"> <image width="200" height="200" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"/></pattern></defs><path d= M 82.29,164.57 C 82.29,164.57 164.57,164.57 164.57,82.29 L 164.57,82.29 411.43,82.29 C 411.43,82.29 411.43,164.57 493.71,164.57 L 493.71,164.57 493.71,555.43 C 493.71,555.43 411.43,555.43 411.43,637.71 L 411.43,637.71 164.57,637.71 C 164.57,637.71 164.57,555.43 82.29,555.43 L 82.29,555.43 82.29,164.57 L 82.29,164.57 0.00,164.57 0.00,0.00 0.00,596.57 L 0.00,596.57 82.29,596.57 82.29,596.57 82.29,596.57 C 82.29,596.57 123.43,596.57 123.43,637.71 C 123.43,637.71 123.43,678.86 82.29,678.86 C 82.29,678.86 41.14,678.86 41.14,637.71 C 41.14,637.71 41.14,596.57 82.29,596.57 L 82.29,596.57 0.00,596.57 0.00,720.00 452.57,720.00 452.57,637.71 C 452.57,637.71 452.57,596.57 493.71,596.57 C 493.71,596.57 534.86,596.57 534.86,637.71 C 534.86,637.71 534.86,678.86 493.71,678.86 C 493.71,678.86 452.57,678.86 452.57,637.71 L 452.57,637.71 452.57,720.00 576.00,720.00 576.00,123.43 493.71,123.43 C 493.71,123.43 452.57,123.43 452.57,82.29 C 452.57,82.29 452.57,41.14 493.71,41.14 C 493.71,41.14 534.86,41.14 534.86,82.29 C 534.86,82.29 534.86,123.43 493.71,123.43 L 493.71,123.43 576.00,123.43 576.00,0.00 123.43,0.00 123.43,82.29 C 123.43,82.29 123.43,123.43 82.29,123.43 C 82.29,123.43 41.14,123.43 41.14,82.29 C 41.14,82.29 41.14,41.14 82.29,41.14 C 82.29,41.14 123.43,41.14 123.43,82.29 L 123.43,82.29 123.43,0.00 0.00,0.00 0.00,164.57 " fill="#ff0000;" stroke="#f000" stroke-width="1px" style="fill:url(#matpattern)"/></path></svg>';
data = encodeURIComponent(svg);
below is output of returns data
%3Csvg%20id%3D%22vgroovFrame%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22576%22%20height%3D%22720%22%3E%3Cdefs%3E%20%3Cpattern%20id%3D%22matpattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22200%22%20height%3D%22200%22%20patternUnits%3D%22userSpaceOnUse%22%3E%20%3Cimage%20width%3D%22200%22%20height%3D%22200%22%20xlink%3Ahref%3D%22https%3A%2F%2Fcdn1.arttoframe.com%2Fproducts%2Fmats%2Fimages%2F200%2F61.jpg%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath%20d%3D%20M%2082.29%2C164.57%20C%2082.29%2C164.57%20164.57%2C164.57%20164.57%2C82.29%20L%20164.57%2C82.29%20411.43%2C82.29%20C%20411.43%2C82.29%20411.43%2C164.57%20493.71%2C164.57%20L%20493.71%2C164.57%20493.71%2C555.43%20C%20493.71%2C555.43%20411.43%2C555.43%20411.43%2C637.71%20L%20411.43%2C637.71%20164.57%2C637.71%20C%20164.57%2C637.71%20164.57%2C555.43%2082.29%2C555.43%20L%2082.29%2C555.43%2082.29%2C164.57%20L%2082.29%2C164.57%200.00%2C164.57%200.00%2C0.00%200.00%2C596.57%20L%200.00%2C596.57%2082.29%2C596.57%2082.29%2C596.57%2082.29%2C596.57%20C%2082.29%2C596.57%20123.43%2C596.57%20123.43%2C637.71%20C%20123.43%2C637.71%20123.43%2C678.86%2082.29%2C678.86%20C%2082.29%2C678.86%2041.14%2C678.86%2041.14%2C637.71%20C%2041.14%2C637.71%2041.14%2C596.57%2082.29%2C596.57%20L%2082.29%2C596.57%200.00%2C596.57%200.00%2C720.00%20452.57%2C720.00%20452.57%2C637.71%20C%20452.57%2C637.71%20452.57%2C596.57%20493.71%2C596.57%20C%20493.71%2C596.57%20534.86%2C596.57%20534.86%2C637.71%20C%20534.86%2C637.71%20534.86%2C678.86%20493.71%2C678.86%20C%20493.71%2C678.86%20452.57%2C678.86%20452.57%2C637.71%20L%20452.57%2C637.71%20452.57%2C720.00%20576.00%2C720.00%20576.00%2C123.43%20493.71%2C123.43%20C%20493.71%2C123.43%20452.57%2C123.43%20452.57%2C82.29%20C%20452.57%2C82.29%20452.57%2C41.14%20493.71%2C41.14%20C%20493.71%2C41.14%20534.86%2C41.14%20534.86%2C82.29%20C%20534.86%2C82.29%20534.86%2C123.43%20493.71%2C123.43%20L%20493.71%2C123.43%20576.00%2C123.43%20576.00%2C0.00%20123.43%2C0.00%20123.43%2C82.29%20C%20123.43%2C82.29%20123.43%2C123.43%2082.29%2C123.43%20C%2082.29%2C123.43%2041.14%2C123.43%2041.14%2C82.29%20C%2041.14%2C82.29%2041.14%2C41.14%2082.29%2C41.14%20C%2082.29%2C41.14%20123.43%2C41.14%20123.43%2C82.29%20L%20123.43%2C82.29%20123.43%2C0.00%200.00%2C0.00%200.00%2C164.57%20%22%20fill%3D%22%23ff0000%3B%22%20stroke%3D%22%23f000%22%20stroke-width%3D%221px%22%20style%3D%22fill%3Aurl(%23matpattern)%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E
this is complete code
var popupMatArr = self.getPopUpMatDesign(self.configuration.popupMatStringCode,self.configuration.popupMatStringTopCode,self.configuration.popupMatStringBottomCode, self.selectedColor2, self.selectedColor3, self.configuration.popupMat_appliedMat, parseFloat(self.configuration.cuts[$("#removeimg").attr("data-val")].w), parseFloat(self.configuration.cuts[$("#removeimg").attr("data-val")].h));
var data1 = encodeURIComponent(popupMatArr.svg);
img = new Image();
img.src = "data:image/svg+xml;utf8," + data1;
img.onload = function() {
self.ctx.drawImage(img,
0, 0,
popupMatArr.WD,
popupMatArr.HT,
((parseFloat(self.configuration.glass['frameWidth']) - vgroovConfigArr.dt/parseFloat(self.configuration.ppi)) * parseFloat(self.configuration.ppi) )* self.scale,
((parseFloat(self.configuration.glass['frameWidth']) - vgroovConfigArr.dt/parseFloat(self.configuration.ppi)) * parseFloat(self.configuration.ppi) )* self.scale,
popupMatArr.WD * self.scale,
popupMatArr.HT * self.scale,
);
}
This is Svg image before encodeURIComponent
<svg id="vgroovFrame" xmlns="http://www.w3.org/2000/svg" width="576" height="720">
<defs>
<pattern id="matpattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
<image width="200" height="200" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d=" M 82.29,164.57 C 82.29,164.57 164.57,164.57 164.57,82.29 L 164.57,82.29 411.43,82.29 C 411.43,82.29 411.43,164.57 493.71,164.57 L 493.71,164.57 493.71,555.43 C 493.71,555.43 411.43,555.43 411.43,637.71 L 411.43,637.71 164.57,637.71 C 164.57,637.71 164.57,555.43 82.29,555.43 L 82.29,555.43 82.29,164.57 L 82.29,164.57 0.00,164.57 0.00,0.00 0.00,596.57 L 0.00,596.57 82.29,596.57 82.29,596.57 82.29,596.57 C 82.29,596.57 123.43,596.57 123.43,637.71 C 123.43,637.71 123.43,678.86 82.29,678.86 C 82.29,678.86 41.14,678.86 41.14,637.71 C 41.14,637.71 41.14,596.57 82.29,596.57 L 82.29,596.57 0.00,596.57 0.00,720.00 452.57,720.00 452.57,637.71 C 452.57,637.71 452.57,596.57 493.71,596.57 C 493.71,596.57 534.86,596.57 534.86,637.71 C 534.86,637.71 534.86,678.86 493.71,678.86 C 493.71,678.86 452.57,678.86 452.57,637.71 L 452.57,637.71 452.57,720.00 576.00,720.00 576.00,123.43 493.71,123.43 C 493.71,123.43 452.57,123.43 452.57,82.29 C 452.57,82.29 452.57,41.14 493.71,41.14 C 493.71,41.14 534.86,41.14 534.86,82.29 C 534.86,82.29 534.86,123.43 493.71,123.43 L 493.71,123.43 576.00,123.43 576.00,0.00 123.43,0.00 123.43,82.29 C 123.43,82.29 123.43,123.43 82.29,123.43 C 82.29,123.43 41.14,123.43 41.14,82.29 C 41.14,82.29 41.14,41.14 82.29,41.14 C 82.29,41.14 123.43,41.14 123.43,82.29 L 123.43,82.29 123.43,0.00 0.00,0.00 0.00,164.57 " fill="#ff0000;" stroke="#f000" stroke-width="1px" style="fill:url(#matpattern)">
</path>
</svg>

SVG path (coordinates) for THREE.js

I am have taken the exact code from ThreeJs Example which is for generating this City Model.
I have a generated a city boundaries SVG path from Google maps and would like to generate same kind of 3D object using above code. My SVG path code is below
"M -378463.90230276587 -216828.5204525995 L -378463.90230276587 -216828.5204525995 L -378468.4733200769 -216800.78018946826 L -378457.36255405867 -216726.32967956597 L -378453.2523036701 -216708.13985810167 L -378446.23084408935 -216645.84207578097 L -378446.40886767313 -216640.48042431887 L -378440.04714254953 -216593.4246023558 L -378428.4180137435 -216539.991347306 L -378408.5945640994 -216510.42896043573 L -378385.51956605876 -216467.31060126523 L -378379.14213297196 -216451.9325052259 L -378359.4495830217 -216424.30743382534 L -378348.87288775464 -216401.72985462152 L -378333.6361633847 -216381.90640497737 L -378337.86684149154 -216373.22513727797 L -378341.7990682963 -216369.96835289372 L -378342.2388912678 -216365.88428244408 L -378331.6883759395 -216327.93384318874 L -378324.9287157465 -216311.89601269213 L -378325.3318868038 -216300.2721198738 L -378321.78712309286 -216297.53893426526 L -378317.28940961056 -216296.21946535073 L -378303.3616821797 -216270.99771233014 L -378293.1933939575 -216243.98001550927 L -378293.88454434136 -216242.82286221522 L -378290.4863882877 -216243.61349636634 L -378276.29162548116 -216233.02632912374 L -378253.8973058489 -216247.0954282241 L -378224.3558629296 -216248.45678504065 L -378204.8989324284 -216228.3558280454 L -378170.660808492 -216241.304425766 L -378170.3675931776 -216235.0578923731 L -378170.22622150823 -216232.0943233032 L -378169.26279976114 -216211.52212740996 L -378152.6542465991 -216208.78370581358 L -378105.9858877301 -216201.0815678245 L -378090.63397162955 -216173.3308327178 L -378065.06664341706 -216168.73363546806 L -378045.64636483014 -216185.9233832709 L -378059.37512472627 -216241.5662251538 L -378059.1971011426 -216244.0742632889 L -378057.3906853668 -216269.52639977072 L -378057.05034616264 -216274.34874449397 L -378054.1391369704 -216315.39365251316 L -378045.7615565607 -216328.4836219031 L -377993.89386184997 -216365.8895184318 L -377991.3072838986 -216367.75353007295 L -377955.1789683823 -216371.94232027777 L -377921.14504796837 -216364.08833864375 L -377920.3229978907 -216362.99925319053 L -377915.61584489804 -216367.39224691782 L -377913.6942373916 -216371.958028241 L -377932.8213006642 -216381.0267590344 L -377936.1670968403 -216393.19519457928 L -377929.9310354229 -216427.5799261728 L -377939.4710051143 -216469.85529131463 L -377948.89578307513 -216477.70927294862 L -377959.25780284416 -216480.447694545 L -377976.6465181818 -216485.03965580696 L -377979.7881108354 -216489.22844601178 L -377976.1229194062 -216505.46000805535 L -377983.93501313817 -216532.14783764756 L -377982.971591391 -216552.4215822387 L -378001.82638330036 -216597.61862854837 L -378000.06709141436 -216607.12194632547 L -378003.0044805454 -216615.18013148196 L -377994.6426080991 -216627.98212154533 L -377998.3287434793 -216637.62681099182 L -378000.4283745695 -216641.8679610742 L -378139.4071975765 -216833.3689772615 L -378144.8997487325 -216840.72030407088 L -378258.3531314292 -216996.0772967787 L -378439.5811396393 -216981.68356643748 L -378444.60768788506 -216944.65466102716 L -378449.5399883511 -216925.05112286875 L -378452.2784099475 -216906.3272306534 L -378452.4773774823 -216884.08475466596 L -378456.9332030626 -216867.26676199373 L -378459.5302529896 -216845.6735484881 L -378462.4571701452 -216837.2540801764 L -378463.90230276587 -216828.5204525995 "
If i replace the SVG path from example to the above mentioned, it doesn't even show up. Being completely new to Both Three.js and SVG i am not sure what i am doing wrong.
So far, my guess is that the SVG coordinates i have in my example are very big and not able to see in viewport. For which i tried to use transform = translate(-378460px, -216828px) method. But no luck. Any suggestions ? Help would be really appreciated.

SVG coordinate system is for (x,y) is x unit to the right and y units down.
Three.js coordinate system for (x,y,z) is x unit to the right, y untis upwards and z units away from you.
You will need to do some sort of transformation either way.
If I am doing a SVG representation for my Three.js for 2D model where I am using the x & z axis as my SVG x,y axis, I will make my SVG mode have a transform="translate(width/w, height/2) scale(1,-1)"
This is to move the (0,0) to the middle of the svg and to make the x,y move in the same direction as the three.js model

You don't see your figure because it's far away from your camera view. I've made some changes in the code of the Threejs example.
1) Added a line which adds a name to a mesh containing an extruded geometry taken from the SVG path. With your SVG path code we will get just a single mesh with the name "mesh00" (in the addGeoObject function, the line is mesh.name = "mesh" + i + j;)
2) When I know the name of the figure, I can find it
var svgObj = scene.getObjectByName("mesh00",true);
3) And center it
svgObj.geometry.center();
Of course, it's up to you how you can make your figure visible for your camera. For example, you can move your camera to the figure or (like I did) bring the figure in front of the camera. The camera is positioned very close in the example, so I moved it further away.
jsfiddle example
PS. I applied OrbitControls to make viewing more comfortable.

animating path's width

i have a path like this
var r = Raphael('graph', 600,400);
var l = r.path('M 300,185 L 75,185 Q 65,200 75,215 L 300, 215 Z');
i want the path to animate to final position
var l1 = r.path('M 350,185 L 75,185 Q 65,200 75,215 L 350, 215 Z');
Its a rectangle but curved from left side. I want to animate its right side to left/right.
How i can do this in raphael.js?

var r = Raphael('graph', 600,400);
var l = r.path('M 300,185 L 75,185 Q 65,200 75,215 L 300, 215 Z');
l.animate({path : 'M 350,185 L 75,185 Q 65,200 75,215 L 350, 215 Z'}, duration);
I guess.

Categories