svg-path-properties - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

build/path-properties.js

@@ -1,2 +0,2 @@
-// http://geoexamples.com/path-properties/ Version 0.0.2. Copyright 2016 Roger Veciana i Rovira.
+// http://geoexamples.com/path-properties/ Version 0.1.0. Copyright 2016 Roger Veciana i Rovira.
 (function (global, factory) {
@@ -64,5 +64,7 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     this.getPoint = cubicPoint;
+    this.getDerivative = cubicDerivative;
   } else {
     this.getArcLength = getQuadraticArcLength;
     this.getPoint = quadraticPoint;
+    this.getDerivative = quadraticDerivative;
   }
@@ -85,20 +87,74 @@
   getPointAtLength: function(length) {
-    var error = 1;
-    var t = length/this.length;
+    var t = t2length(length, this.length, this.getArcLength,
+                    [this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y]);
 
-    while (error > 0.008){
+    return this.getPoint([this.a.x, this.b.x, this.c.x, this.d.x],
+                                    [this.a.y, this.b.y, this.c.y, this.d.y],
+                                  t);
+  },
+  getTangentAtLength: function(length){
+    var t = t2length(length, this.length, this.getArcLength,
+                    [this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y]);
 
-      var calcLength = this.getArcLength([this.a.x, this.b.x, this.c.x, this.d.x],
-                                      [this.a.y, this.b.y, this.c.y, this.d.y],
-                                    t);
-      error = Math.abs(length - calcLength)/this.length;
-      t = t + (length-calcLength)/this.length;
+    var derivative = this.getDerivative([this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y], t);
+    var mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
+    var tangent;
+    if (mdl > 0){
+      tangent = {x: derivative.x/mdl, y: derivative.y/mdl};
+    } else {
+      tangent = {x: 0, y: 0};
     }
+    return tangent;
+  },
+  getPropertiesAtLength: function(length){
+    var t = t2length(length, this.length, this.getArcLength,
+                    [this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y]);
 
-    return this.getPoint([this.a.x, this.b.x, this.c.x, this.d.x],
+    var derivative = this.getDerivative([this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y], t);
+    var mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
+    var tangent;
+    if (mdl > 0){
+      tangent = {x: derivative.x/mdl, y: derivative.y/mdl};
+    } else {
+      tangent = {x: 0, y: 0};
+    }
+    var point = this.getPoint([this.a.x, this.b.x, this.c.x, this.d.x],
                                     [this.a.y, this.b.y, this.c.y, this.d.y],
                                   t);
+    return {x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y};
   }
 };
 
+function quadraticDerivative(xs, ys, t){
+  return {x: (1 - t) * 2*(xs[1] - xs[0]) +t * 2*(xs[2] - xs[1]),
+    y: (1 - t) * 2*(ys[1] - ys[0]) +t * 2*(ys[2] - ys[1])
+  };
+}
+
+function cubicDerivative(xs, ys, t){
+  var derivative = quadraticPoint(
+            [3*(xs[1] - xs[0]), 3*(xs[2] - xs[1]), 3*(xs[3] - xs[2])],
+            [3*(ys[1] - ys[0]), 3*(ys[2] - ys[1]), 3*(ys[3] - ys[2])],
+            t);
+  return derivative;
+}
+
+function t2length(length, total_length, func, xs, ys){
+  var error = 1;
+  var t = length/total_length;
+
+  while (error > 0.008){
+
+    var calcLength = func(xs, ys, t);
+    error = Math.abs(length - calcLength)/total_length;
+    t = t + (length-calcLength)/total_length;
+  }
+  return t;
+}
+
 function quadraticPoint(xs, ys, t){
@@ -296,2 +352,12 @@ var x = (1 - t) * (1 - t) * xs[0] + 2 * (1 - t) * t * xs[1] + t * t * xs[2];
 };
+LinearPosition$1.prototype.getTangentAtLength = function(){
+  var module = Math.sqrt((this.x1 - this.x0) * (this.x1 - this.x0) +
+              (this.y1 - this.y0) * (this.y1 - this.y0));
+  return { x: (this.x1 - this.x0)/module, y: (this.y1 - this.y0)/module };
+};
+LinearPosition$1.prototype.getPropertiesAtLength = function(pos){
+  var point = this.getPointAtLength(pos);
+  var tangent = this.getTangentAtLength();
+  return {x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y};
+};
 
@@ -322,7 +388,6 @@ var pathProperties = function(svgString) {
         cur = [parsed[i][1], parsed[i][2]];
-
       } else if(parsed[i][0] === "l"){
         length = length + Math.sqrt(Math.pow(parsed[i][1], 2) + Math.pow(parsed[i][2], 2));
+        functions.push(new LinearPosition(cur[0], parsed[i][1] + cur[0], cur[1], parsed[i][2] + cur[1]));
         cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
-        functions.push();
       } else if(parsed[i][0] === "H"){
@@ -344,3 +409,2 @@ length = length + Math.abs(cur[0] - parsed[i][1]);
         cur[1] = parsed[i][1] + cur[1];
-        functions.push();
       //Close path
@@ -429,2 +493,17 @@ }  else if(parsed[i][0] === "z" || parsed[i][0] === "Z"){
   svgProperties.getPointAtLength = function(fractionLength){
+    var fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getPointAtLength(fractionPart.fraction);
+  };
+
+  svgProperties.getTangentAtLength = function(fractionLength){
+    var fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getTangentAtLength(fractionPart.fraction);
+  };
+
+  svgProperties.getPropertiesAtLength = function(fractionLength){
+    var fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getPropertiesAtLength(fractionPart.fraction);
+  };
+
+  var getPartAtLength = function(fractionLength){
     if(fractionLength < 0){
@@ -442,4 +521,3 @@ fractionLength = 0;
     i++;
-    var fractionPart = fractionLength-partial_lengths[i-1];
-    return functions[i].getPointAtLength(fractionPart);
+    return {fraction: fractionLength-partial_lengths[i-1], i: i};
   };
@@ -446,0 +524,0 @@

build/path-properties.min.js

@@ -1,2 +0,2 @@
-// http://geoexamples.com/path-properties/ Version 0.0.2. Copyright 2016 Roger Veciana i Rovira.
-!function(t,h){"object"==typeof exports&&"undefined"!=typeof module?h(exports):"function"==typeof define&&define.amd?define(["exports"],h):h(t.spp=t.spp||{})}(this,function(t){"use strict";function h(t){var h=t.match(l);return h?h.map(Number):[]}function n(t,h,n,r,a,o,g,c){this.a={x:t,y:h},this.b={x:n,y:r},this.c={x:a,y:o},this.d={x:g,y:c},g&&c?(this.getArcLength=u,this.getPoint=s):(this.getArcLength=i,this.getPoint=e),this.init()}function e(t,h,n){var e=(1-n)*(1-n)*t[0]+2*(1-n)*n*t[1]+n*n*t[2],s=(1-n)*(1-n)*h[0]+2*(1-n)*n*h[1]+n*n*h[2];return{x:e,y:s}}function s(t,h,n){var e=(1-n)*(1-n)*(1-n)*t[0]+3*(1-n)*(1-n)*n*t[1]+3*(1-n)*n*n*t[2]+n*n*n*t[3],s=(1-n)*(1-n)*(1-n)*h[0]+3*(1-n)*(1-n)*n*h[1]+3*(1-n)*n*n*h[2]+n*n*n*h[3];return{x:e,y:s}}function i(t,h,n){void 0===n&&(n=1);var e=t[0]-2*t[1]+t[2],s=h[0]-2*h[1]+h[2],i=2*t[1]-2*t[0],r=2*h[1]-2*h[0],a=4*(e*e+s*s),o=4*(e*i+s*r),u=i*i+r*r,g=o/(2*a),c=u/a,p=n+g,f=c-g*g;return Math.sqrt(a)/2*(p*Math.sqrt(p*p+f)-g*Math.sqrt(g*g+f)+f*Math.log(Math.abs((p+Math.sqrt(p*p+f))/(g+Math.sqrt(g*g+f)))))}function r(t,h){return M[t][h]}function a(t,h,n){var e,s,i,o=n.length-1;if(0===o)return 0;if(0===t){for(s=0,i=0;i<=o;i++)s+=r(o,i)*Math.pow(1-h,o-i)*Math.pow(h,i)*n[i];return s}for(e=new Array(o),i=0;i<o;i++)e[i]=o*(n[i+1]-n[i]);return a(t-1,h,e)}function o(t,h,n){var e=a(1,n,t),s=a(1,n,h),i=e*e+s*s;return Math.sqrt(i)}function u(t,h,n){var e,s,i,r;void 0===n&&(n=1);var a=20;for(e=n/2,s=0,i=0;i<a;i++)r=e*x[a][i]+e,s+=w[a][i]*o(t,h,r);return e*s}function g(t,h,n,e){this.x0=t,this.x1=h,this.y0=n,this.y1=e}var c={a:7,c:6,h:1,l:2,m:2,q:4,s:4,t:2,v:1,z:0},p=/([astvzqmhlc])([^astvzqmhlc]*)/gi,f=function(t){var n=[];return t.replace(p,function(t,e,s){var i=e.toLowerCase();for(s=h(s),"m"===i&&s.length>2&&(n.push([e].concat(s.splice(0,2))),i="l",e="m"===e?"l":"L");s.length>=0;){if(s.length===c[i])return s.unshift(e),n.push(s);if(s.length<c[i])throw new Error("malformed path data");n.push([e].concat(s.splice(0,c[i])))}}),n},l=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi,y=function(t,h,e,s,i,r,a,o){return new n(t,h,e,s,i,r,a,o)};n.prototype={constructor:n,init:function(){this.length=this.getArcLength([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y])},getTotalLength:function(){return this.length},getPointAtLength:function(t){for(var h=1,n=t/this.length;h>.008;){var e=this.getArcLength([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y],n);h=Math.abs(t-e)/this.length,n+=(t-e)/this.length}return this.getPoint([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y],n)}};var x=[[],[],[-.5773502691896257,.5773502691896257],[0,-.7745966692414834,.7745966692414834],[-.33998104358485626,.33998104358485626,-.8611363115940526,.8611363115940526],[0,-.5384693101056831,.5384693101056831,-.906179845938664,.906179845938664],[.6612093864662645,-.6612093864662645,-.2386191860831969,.2386191860831969,-.932469514203152,.932469514203152],[0,.4058451513773972,-.4058451513773972,-.7415311855993945,.7415311855993945,-.9491079123427585,.9491079123427585],[-.1834346424956498,.1834346424956498,-.525532409916329,.525532409916329,-.7966664774136267,.7966664774136267,-.9602898564975363,.9602898564975363],[0,-.8360311073266358,.8360311073266358,-.9681602395076261,.9681602395076261,-.3242534234038089,.3242534234038089,-.6133714327005904,.6133714327005904],[-.14887433898163122,.14887433898163122,-.4333953941292472,.4333953941292472,-.6794095682990244,.6794095682990244,-.8650633666889845,.8650633666889845,-.9739065285171717,.9739065285171717],[0,-.26954315595234496,.26954315595234496,-.5190961292068118,.5190961292068118,-.7301520055740494,.7301520055740494,-.8870625997680953,.8870625997680953,-.978228658146057,.978228658146057],[-.1252334085114689,.1252334085114689,-.3678314989981802,.3678314989981802,-.5873179542866175,.5873179542866175,-.7699026741943047,.7699026741943047,-.9041172563704749,.9041172563704749,-.9815606342467192,.9815606342467192],[0,-.2304583159551348,.2304583159551348,-.44849275103644687,.44849275103644687,-.6423493394403402,.6423493394403402,-.8015780907333099,.8015780907333099,-.9175983992229779,.9175983992229779,-.9841830547185881,.9841830547185881],[-.10805494870734367,.10805494870734367,-.31911236892788974,.31911236892788974,-.5152486363581541,.5152486363581541,-.6872929048116855,.6872929048116855,-.827201315069765,.827201315069765,-.9284348836635735,.9284348836635735,-.9862838086968123,.9862838086968123],[0,-.20119409399743451,.20119409399743451,-.3941513470775634,.3941513470775634,-.5709721726085388,.5709721726085388,-.7244177313601701,.7244177313601701,-.8482065834104272,.8482065834104272,-.937273392400706,.937273392400706,-.9879925180204854,.9879925180204854],[-.09501250983763744,.09501250983763744,-.2816035507792589,.2816035507792589,-.45801677765722737,.45801677765722737,-.6178762444026438,.6178762444026438,-.755404408355003,.755404408355003,-.8656312023878318,.8656312023878318,-.9445750230732326,.9445750230732326,-.9894009349916499,.9894009349916499],[0,-.17848418149584785,.17848418149584785,-.3512317634538763,.3512317634538763,-.5126905370864769,.5126905370864769,-.6576711592166907,.6576711592166907,-.7815140038968014,.7815140038968014,-.8802391537269859,.8802391537269859,-.9506755217687678,.9506755217687678,-.9905754753144174,.9905754753144174],[-.0847750130417353,.0847750130417353,-.2518862256915055,.2518862256915055,-.41175116146284263,.41175116146284263,-.5597708310739475,.5597708310739475,-.6916870430603532,.6916870430603532,-.8037049589725231,.8037049589725231,-.8926024664975557,.8926024664975557,-.9558239495713977,.9558239495713977,-.9915651684209309,.9915651684209309],[0,-.16035864564022537,.16035864564022537,-.31656409996362983,.31656409996362983,-.46457074137596094,.46457074137596094,-.600545304661681,.600545304661681,-.7209661773352294,.7209661773352294,-.8227146565371428,.8227146565371428,-.9031559036148179,.9031559036148179,-.96020815213483,.96020815213483,-.9924068438435844,.9924068438435844],[-.07652652113349734,.07652652113349734,-.22778585114164507,.22778585114164507,-.37370608871541955,.37370608871541955,-.5108670019508271,.5108670019508271,-.636053680726515,.636053680726515,-.7463319064601508,.7463319064601508,-.8391169718222188,.8391169718222188,-.912234428251326,.912234428251326,-.9639719272779138,.9639719272779138,-.9931285991850949,.9931285991850949],[0,-.1455618541608951,.1455618541608951,-.2880213168024011,.2880213168024011,-.4243421202074388,.4243421202074388,-.5516188358872198,.5516188358872198,-.6671388041974123,.6671388041974123,-.7684399634756779,.7684399634756779,-.8533633645833173,.8533633645833173,-.9200993341504008,.9200993341504008,-.9672268385663063,.9672268385663063,-.9937521706203895,.9937521706203895],[-.06973927331972223,.06973927331972223,-.20786042668822127,.20786042668822127,-.34193582089208424,.34193582089208424,-.469355837986757,.469355837986757,-.5876404035069116,.5876404035069116,-.6944872631866827,.6944872631866827,-.7878168059792081,.7878168059792081,-.8658125777203002,.8658125777203002,-.926956772187174,.926956772187174,-.9700604978354287,.9700604978354287,-.9942945854823992,.9942945854823992],[0,-.1332568242984661,.1332568242984661,-.26413568097034495,.26413568097034495,-.3903010380302908,.3903010380302908,-.5095014778460075,.5095014778460075,-.6196098757636461,.6196098757636461,-.7186613631319502,.7186613631319502,-.8048884016188399,.8048884016188399,-.8767523582704416,.8767523582704416,-.9329710868260161,.9329710868260161,-.9725424712181152,.9725424712181152,-.9947693349975522,.9947693349975522],[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213]],w=[[],[],[1,1],[.8888888888888888,.5555555555555556,.5555555555555556],[.6521451548625461,.6521451548625461,.34785484513745385,.34785484513745385],[.5688888888888889,.47862867049936647,.47862867049936647,.23692688505618908,.23692688505618908],[.3607615730481386,.3607615730481386,.46791393457269104,.46791393457269104,.17132449237917036,.17132449237917036],[.4179591836734694,.3818300505051189,.3818300505051189,.27970539148927664,.27970539148927664,.1294849661688697,.1294849661688697],[.362683783378362,.362683783378362,.31370664587788727,.31370664587788727,.22238103445337448,.22238103445337448,.10122853629037626,.10122853629037626],[.3302393550012598,.1806481606948574,.1806481606948574,.08127438836157441,.08127438836157441,.31234707704000286,.31234707704000286,.26061069640293544,.26061069640293544],[.29552422471475287,.29552422471475287,.26926671930999635,.26926671930999635,.21908636251598204,.21908636251598204,.1494513491505806,.1494513491505806,.06667134430868814,.06667134430868814],[.2729250867779006,.26280454451024665,.26280454451024665,.23319376459199048,.23319376459199048,.18629021092773426,.18629021092773426,.1255803694649046,.1255803694649046,.05566856711617366,.05566856711617366],[.24914704581340277,.24914704581340277,.2334925365383548,.2334925365383548,.20316742672306592,.20316742672306592,.16007832854334622,.16007832854334622,.10693932599531843,.10693932599531843,.04717533638651183,.04717533638651183],[.2325515532308739,.22628318026289723,.22628318026289723,.2078160475368885,.2078160475368885,.17814598076194574,.17814598076194574,.13887351021978725,.13887351021978725,.09212149983772845,.09212149983772845,.04048400476531588,.04048400476531588],[.2152638534631578,.2152638534631578,.2051984637212956,.2051984637212956,.18553839747793782,.18553839747793782,.15720316715819355,.15720316715819355,.12151857068790319,.12151857068790319,.08015808715976021,.08015808715976021,.03511946033175186,.03511946033175186],[.2025782419255613,.19843148532711158,.19843148532711158,.1861610000155622,.1861610000155622,.16626920581699392,.16626920581699392,.13957067792615432,.13957067792615432,.10715922046717194,.10715922046717194,.07036604748810812,.07036604748810812,.03075324199611727,.03075324199611727],[.1894506104550685,.1894506104550685,.18260341504492358,.18260341504492358,.16915651939500254,.16915651939500254,.14959598881657674,.14959598881657674,.12462897125553388,.12462897125553388,.09515851168249279,.09515851168249279,.062253523938647894,.062253523938647894,.027152459411754096,.027152459411754096],[.17944647035620653,.17656270536699264,.17656270536699264,.16800410215645004,.16800410215645004,.15404576107681028,.15404576107681028,.13513636846852548,.13513636846852548,.11188384719340397,.11188384719340397,.08503614831717918,.08503614831717918,.0554595293739872,.0554595293739872,.02414830286854793,.02414830286854793],[.1691423829631436,.1691423829631436,.16427648374583273,.16427648374583273,.15468467512626524,.15468467512626524,.14064291467065065,.14064291467065065,.12255520671147846,.12255520671147846,.10094204410628717,.10094204410628717,.07642573025488905,.07642573025488905,.0497145488949698,.0497145488949698,.02161601352648331,.02161601352648331],[.1610544498487837,.15896884339395434,.15896884339395434,.15276604206585967,.15276604206585967,.1426067021736066,.1426067021736066,.12875396253933621,.12875396253933621,.11156664554733399,.11156664554733399,.09149002162245,.09149002162245,.06904454273764123,.06904454273764123,.0448142267656996,.0448142267656996,.019461788229726478,.019461788229726478],[.15275338713072584,.15275338713072584,.14917298647260374,.14917298647260374,.14209610931838204,.14209610931838204,.13168863844917664,.13168863844917664,.11819453196151841,.11819453196151841,.10193011981724044,.10193011981724044,.08327674157670475,.08327674157670475,.06267204833410907,.06267204833410907,.04060142980038694,.04060142980038694,.017614007139152118,.017614007139152118],[.14608113364969041,.14452440398997005,.14452440398997005,.13988739479107315,.13988739479107315,.13226893863333747,.13226893863333747,.12183141605372853,.12183141605372853,.10879729916714838,.10879729916714838,.09344442345603386,.09344442345603386,.0761001136283793,.0761001136283793,.057134425426857205,.057134425426857205,.036953789770852494,.036953789770852494,.016017228257774335,.016017228257774335],[.13925187285563198,.13925187285563198,.13654149834601517,.13654149834601517,.13117350478706238,.13117350478706238,.12325237681051242,.12325237681051242,.11293229608053922,.11293229608053922,.10041414444288096,.10041414444288096,.08594160621706773,.08594160621706773,.06979646842452049,.06979646842452049,.052293335152683286,.052293335152683286,.03377490158481415,.03377490158481415,.0146279952982722,.0146279952982722],[.13365457218610619,.1324620394046966,.1324620394046966,.12890572218808216,.12890572218808216,.12304908430672953,.12304908430672953,.11499664022241136,.11499664022241136,.10489209146454141,.10489209146454141,.09291576606003515,.09291576606003515,.07928141177671895,.07928141177671895,.06423242140852585,.06423242140852585,.04803767173108467,.04803767173108467,.030988005856979445,.030988005856979445,.013411859487141771,.013411859487141771],[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872]],M=[[1],[1,1],[1,2,1],[1,3,3,1]],v=function(t,h,n,e){return new g(t,h,n,e)};g.prototype.getTotalLength=function(){return Math.sqrt(Math.pow(this.x0-this.x1,2)+Math.pow(this.y0-this.y1,2))},g.prototype.getPointAtLength=function(t){var h=t/Math.sqrt(Math.pow(this.x0-this.x1,2)+Math.pow(this.y0-this.y1,2)),n=(this.x1-this.x0)*h,e=(this.y1-this.y0)*h;return{x:this.x0+n,y:this.y0+e}};var d=function(t){function h(t){for(var i,r=f(t),a=[0,0],o=[0,0],u=0;u<r.length;u++)"M"===r[u][0]?(a=[r[u][1],r[u][2]],s.push(null)):"m"===r[u][0]?(a=[r[u][1]+a[0],r[u][2]+a[1]],s.push(null)):"L"===r[u][0]?(n+=Math.sqrt(Math.pow(a[0]-r[u][1],2)+Math.pow(a[1]-r[u][2],2)),s.push(new v(a[0],r[u][1],a[1],r[u][2])),a=[r[u][1],r[u][2]]):"l"===r[u][0]?(n+=Math.sqrt(Math.pow(r[u][1],2)+Math.pow(r[u][2],2)),a=[r[u][1]+a[0],r[u][2]+a[1]],s.push()):"H"===r[u][0]?(n+=Math.abs(a[0]-r[u][1]),s.push(new v(a[0],r[u][1],a[1],a[1])),a[0]=r[u][1]):"h"===r[u][0]?(n+=Math.abs(r[u][1]),s.push(new v(a[0],a[0]+r[u][1],a[1],a[1])),a[0]=r[u][1]+a[0]):"V"===r[u][0]?(n+=Math.abs(a[1]-r[u][1]),s.push(new v(a[0],a[0],a[1],r[u][1])),a[1]=r[u][1]):"v"===r[u][0]?(n+=Math.abs(r[u][1]),s.push(new v(a[0],a[0],a[1],a[1]+r[u][1])),a[1]=r[u][1]+a[1],s.push()):"z"===r[u][0]||"Z"===r[u][0]?(n+=Math.sqrt(Math.pow(r[0][1]-a[0],2)+Math.pow(r[0][2]-a[1],2)),s.push(new v(a[0],r[0][1],a[1],r[0][2])),a=[r[0][1],r[0][2]]):"C"===r[u][0]?(i=new y(a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4],r[u][5],r[u][6]),n+=i.getTotalLength(),a=[r[u][5],r[u][6]],s.push(i)):"c"===r[u][0]?(i=new y(a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4],a[0]+r[u][5],a[1]+r[u][6]),n+=i.getTotalLength(),a=[r[u][5]+a[0],r[u][6]+a[1]],s.push(i)):"S"===r[u][0]?(i=u>0&&["C","c","S","s"].indexOf(r[u-1][0])>-1?new y(a[0],a[1],2*a[0]-r[u-1][r[u-1].length-4],2*a[1]-r[u-1][r[u-1].length-3],r[u][1],r[u][2],r[u][3],r[u][4]):new y(a[0],a[1],a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4]),n+=i.getTotalLength(),a=[r[u][3],r[u][4]],s.push(i)):"s"===r[u][0]?(i=u>0&&["C","c","S","s"].indexOf(r[u-1][0])>-1?new y(a[0],a[1],a[0]+i.d.x-i.c.x,a[1]+i.d.y-i.c.y,a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]):new y(a[0],a[1],a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]),n+=i.getTotalLength(),a=[r[u][3]+a[0],r[u][4]+a[1]],s.push(i)):"Q"===r[u][0]?(i=new y(a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4]),n+=i.getTotalLength(),s.push(i),a=[r[u][3],r[u][4]],o=[r[u][1],r[u][2]]):"q"===r[u][0]?(i=new y(a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]),n+=i.getTotalLength(),o=[a[0]+r[u][1],a[1]+r[u][2]],a=[r[u][3]+a[0],r[u][4]+a[1]],s.push(i)):"T"===r[u][0]?(i=u>0&&["Q","q","T","t"].indexOf(r[u-1][0])>-1?new y(a[0],a[1],2*a[0]-o[0],2*a[1]-o[1],r[u][1],r[u][2]):new v(a[0],r[u][1],a[1],r[u][2]),s.push(i),n+=i.getTotalLength(),o=[2*a[0]-o[0],2*a[1]-o[1]],a=[r[u][1],r[u][2]]):"t"===r[u][0]&&(i=u>0&&["Q","q","T","t"].indexOf(r[u-1][0])>-1?new y(a[0],a[1],2*a[0]-o[0],2*a[1]-o[1],a[0]+r[u][1],a[1]+r[u][2]):new v(a[0],a[0]+r[u][1],a[1],a[1]+r[u][2]),n+=i.getTotalLength(),o=[2*a[0]-o[0],2*a[1]-o[1]],a=[r[u][1]+a[0],r[u][2]+a[0]],s.push(i)),e.push(n);return h}var n=0,e=[],s=[];return h.getTotalLength=function(){return n},h.getPointAtLength=function(t){t<0?t=0:t>n&&(t=n);for(var h=e.length-1;e[h]>=t&&e[h]>0;)h--;h++;var i=t-e[h-1];return s[h].getPointAtLength(i)},h(t)};t.svgPathProperties=d,t.parse=f,t.Bezier=y,Object.defineProperty(t,"__esModule",{value:!0})});
+// http://geoexamples.com/path-properties/ Version 0.1.0. Copyright 2016 Roger Veciana i Rovira.
+!function(t,h){"object"==typeof exports&&"undefined"!=typeof module?h(exports):"function"==typeof define&&define.amd?define(["exports"],h):h(t.spp=t.spp||{})}(this,function(t){"use strict";function h(t){var h=t.match(l);return h?h.map(Number):[]}function n(t,h,n,s,u,g,c,x){this.a={x:t,y:h},this.b={x:n,y:s},this.c={x:u,y:g},this.d={x:c,y:x},c&&x?(this.getArcLength=y,this.getPoint=a,this.getDerivative=e):(this.getArcLength=o,this.getPoint=r,this.getDerivative=i),this.init()}function i(t,h,n){return{x:2*(1-n)*(t[1]-t[0])+2*n*(t[2]-t[1]),y:2*(1-n)*(h[1]-h[0])+2*n*(h[2]-h[1])}}function e(t,h,n){var i=r([3*(t[1]-t[0]),3*(t[2]-t[1]),3*(t[3]-t[2])],[3*(h[1]-h[0]),3*(h[2]-h[1]),3*(h[3]-h[2])],n);return i}function s(t,h,n,i,e){for(var s=1,r=t/h;s>.008;){var a=n(i,e,r);s=Math.abs(t-a)/h,r+=(t-a)/h}return r}function r(t,h,n){var i=(1-n)*(1-n)*t[0]+2*(1-n)*n*t[1]+n*n*t[2],e=(1-n)*(1-n)*h[0]+2*(1-n)*n*h[1]+n*n*h[2];return{x:i,y:e}}function a(t,h,n){var i=(1-n)*(1-n)*(1-n)*t[0]+3*(1-n)*(1-n)*n*t[1]+3*(1-n)*n*n*t[2]+n*n*n*t[3],e=(1-n)*(1-n)*(1-n)*h[0]+3*(1-n)*(1-n)*n*h[1]+3*(1-n)*n*n*h[2]+n*n*n*h[3];return{x:i,y:e}}function o(t,h,n){void 0===n&&(n=1);var i=t[0]-2*t[1]+t[2],e=h[0]-2*h[1]+h[2],s=2*t[1]-2*t[0],r=2*h[1]-2*h[0],a=4*(i*i+e*e),o=4*(i*s+e*r),u=s*s+r*r,g=o/(2*a),c=u/a,y=n+g,x=c-g*g;return Math.sqrt(a)/2*(y*Math.sqrt(y*y+x)-g*Math.sqrt(g*g+x)+x*Math.log(Math.abs((y+Math.sqrt(y*y+x))/(g+Math.sqrt(g*g+x)))))}function u(t,h){return L[t][h]}function g(t,h,n){var i,e,s,r=n.length-1;if(0===r)return 0;if(0===t){for(e=0,s=0;s<=r;s++)e+=u(r,s)*Math.pow(1-h,r-s)*Math.pow(h,s)*n[s];return e}for(i=new Array(r),s=0;s<r;s++)i[s]=r*(n[s+1]-n[s]);return g(t-1,h,i)}function c(t,h,n){var i=g(1,n,t),e=g(1,n,h),s=i*i+e*e;return Math.sqrt(s)}function y(t,h,n){var i,e,s,r;void 0===n&&(n=1);var a=20;for(i=n/2,e=0,s=0;s<a;s++)r=i*w[a][s]+i,e+=M[a][s]*c(t,h,r);return i*e}function x(t,h,n,i){this.x0=t,this.x1=h,this.y0=n,this.y1=i}var f={a:7,c:6,h:1,l:2,m:2,q:4,s:4,t:2,v:1,z:0},p=/([astvzqmhlc])([^astvzqmhlc]*)/gi,v=function(t){var n=[];return t.replace(p,function(t,i,e){var s=i.toLowerCase();for(e=h(e),"m"===s&&e.length>2&&(n.push([i].concat(e.splice(0,2))),s="l",i="m"===i?"l":"L");e.length>=0;){if(e.length===f[s])return e.unshift(i),n.push(e);if(e.length<f[s])throw new Error("malformed path data");n.push([i].concat(e.splice(0,f[s])))}}),n},l=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi,d=function(t,h,i,e,s,r,a,o){return new n(t,h,i,e,s,r,a,o)};n.prototype={constructor:n,init:function(){this.length=this.getArcLength([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y])},getTotalLength:function(){return this.length},getPointAtLength:function(t){var h=s(t,this.length,this.getArcLength,[this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y]);return this.getPoint([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y],h)},getTangentAtLength:function(t){var h,n=s(t,this.length,this.getArcLength,[this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y]),i=this.getDerivative([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y],n),e=Math.sqrt(i.x*i.x+i.y*i.y);return h=e>0?{x:i.x/e,y:i.y/e}:{x:0,y:0}},getPropertiesAtLength:function(t){var h,n=s(t,this.length,this.getArcLength,[this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y]),i=this.getDerivative([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y],n),e=Math.sqrt(i.x*i.x+i.y*i.y);h=e>0?{x:i.x/e,y:i.y/e}:{x:0,y:0};var r=this.getPoint([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y],n);return{x:r.x,y:r.y,tangentX:h.x,tangentY:h.y}}};var w=[[],[],[-.5773502691896257,.5773502691896257],[0,-.7745966692414834,.7745966692414834],[-.33998104358485626,.33998104358485626,-.8611363115940526,.8611363115940526],[0,-.5384693101056831,.5384693101056831,-.906179845938664,.906179845938664],[.6612093864662645,-.6612093864662645,-.2386191860831969,.2386191860831969,-.932469514203152,.932469514203152],[0,.4058451513773972,-.4058451513773972,-.7415311855993945,.7415311855993945,-.9491079123427585,.9491079123427585],[-.1834346424956498,.1834346424956498,-.525532409916329,.525532409916329,-.7966664774136267,.7966664774136267,-.9602898564975363,.9602898564975363],[0,-.8360311073266358,.8360311073266358,-.9681602395076261,.9681602395076261,-.3242534234038089,.3242534234038089,-.6133714327005904,.6133714327005904],[-.14887433898163122,.14887433898163122,-.4333953941292472,.4333953941292472,-.6794095682990244,.6794095682990244,-.8650633666889845,.8650633666889845,-.9739065285171717,.9739065285171717],[0,-.26954315595234496,.26954315595234496,-.5190961292068118,.5190961292068118,-.7301520055740494,.7301520055740494,-.8870625997680953,.8870625997680953,-.978228658146057,.978228658146057],[-.1252334085114689,.1252334085114689,-.3678314989981802,.3678314989981802,-.5873179542866175,.5873179542866175,-.7699026741943047,.7699026741943047,-.9041172563704749,.9041172563704749,-.9815606342467192,.9815606342467192],[0,-.2304583159551348,.2304583159551348,-.44849275103644687,.44849275103644687,-.6423493394403402,.6423493394403402,-.8015780907333099,.8015780907333099,-.9175983992229779,.9175983992229779,-.9841830547185881,.9841830547185881],[-.10805494870734367,.10805494870734367,-.31911236892788974,.31911236892788974,-.5152486363581541,.5152486363581541,-.6872929048116855,.6872929048116855,-.827201315069765,.827201315069765,-.9284348836635735,.9284348836635735,-.9862838086968123,.9862838086968123],[0,-.20119409399743451,.20119409399743451,-.3941513470775634,.3941513470775634,-.5709721726085388,.5709721726085388,-.7244177313601701,.7244177313601701,-.8482065834104272,.8482065834104272,-.937273392400706,.937273392400706,-.9879925180204854,.9879925180204854],[-.09501250983763744,.09501250983763744,-.2816035507792589,.2816035507792589,-.45801677765722737,.45801677765722737,-.6178762444026438,.6178762444026438,-.755404408355003,.755404408355003,-.8656312023878318,.8656312023878318,-.9445750230732326,.9445750230732326,-.9894009349916499,.9894009349916499],[0,-.17848418149584785,.17848418149584785,-.3512317634538763,.3512317634538763,-.5126905370864769,.5126905370864769,-.6576711592166907,.6576711592166907,-.7815140038968014,.7815140038968014,-.8802391537269859,.8802391537269859,-.9506755217687678,.9506755217687678,-.9905754753144174,.9905754753144174],[-.0847750130417353,.0847750130417353,-.2518862256915055,.2518862256915055,-.41175116146284263,.41175116146284263,-.5597708310739475,.5597708310739475,-.6916870430603532,.6916870430603532,-.8037049589725231,.8037049589725231,-.8926024664975557,.8926024664975557,-.9558239495713977,.9558239495713977,-.9915651684209309,.9915651684209309],[0,-.16035864564022537,.16035864564022537,-.31656409996362983,.31656409996362983,-.46457074137596094,.46457074137596094,-.600545304661681,.600545304661681,-.7209661773352294,.7209661773352294,-.8227146565371428,.8227146565371428,-.9031559036148179,.9031559036148179,-.96020815213483,.96020815213483,-.9924068438435844,.9924068438435844],[-.07652652113349734,.07652652113349734,-.22778585114164507,.22778585114164507,-.37370608871541955,.37370608871541955,-.5108670019508271,.5108670019508271,-.636053680726515,.636053680726515,-.7463319064601508,.7463319064601508,-.8391169718222188,.8391169718222188,-.912234428251326,.912234428251326,-.9639719272779138,.9639719272779138,-.9931285991850949,.9931285991850949],[0,-.1455618541608951,.1455618541608951,-.2880213168024011,.2880213168024011,-.4243421202074388,.4243421202074388,-.5516188358872198,.5516188358872198,-.6671388041974123,.6671388041974123,-.7684399634756779,.7684399634756779,-.8533633645833173,.8533633645833173,-.9200993341504008,.9200993341504008,-.9672268385663063,.9672268385663063,-.9937521706203895,.9937521706203895],[-.06973927331972223,.06973927331972223,-.20786042668822127,.20786042668822127,-.34193582089208424,.34193582089208424,-.469355837986757,.469355837986757,-.5876404035069116,.5876404035069116,-.6944872631866827,.6944872631866827,-.7878168059792081,.7878168059792081,-.8658125777203002,.8658125777203002,-.926956772187174,.926956772187174,-.9700604978354287,.9700604978354287,-.9942945854823992,.9942945854823992],[0,-.1332568242984661,.1332568242984661,-.26413568097034495,.26413568097034495,-.3903010380302908,.3903010380302908,-.5095014778460075,.5095014778460075,-.6196098757636461,.6196098757636461,-.7186613631319502,.7186613631319502,-.8048884016188399,.8048884016188399,-.8767523582704416,.8767523582704416,-.9329710868260161,.9329710868260161,-.9725424712181152,.9725424712181152,-.9947693349975522,.9947693349975522],[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213]],M=[[],[],[1,1],[.8888888888888888,.5555555555555556,.5555555555555556],[.6521451548625461,.6521451548625461,.34785484513745385,.34785484513745385],[.5688888888888889,.47862867049936647,.47862867049936647,.23692688505618908,.23692688505618908],[.3607615730481386,.3607615730481386,.46791393457269104,.46791393457269104,.17132449237917036,.17132449237917036],[.4179591836734694,.3818300505051189,.3818300505051189,.27970539148927664,.27970539148927664,.1294849661688697,.1294849661688697],[.362683783378362,.362683783378362,.31370664587788727,.31370664587788727,.22238103445337448,.22238103445337448,.10122853629037626,.10122853629037626],[.3302393550012598,.1806481606948574,.1806481606948574,.08127438836157441,.08127438836157441,.31234707704000286,.31234707704000286,.26061069640293544,.26061069640293544],[.29552422471475287,.29552422471475287,.26926671930999635,.26926671930999635,.21908636251598204,.21908636251598204,.1494513491505806,.1494513491505806,.06667134430868814,.06667134430868814],[.2729250867779006,.26280454451024665,.26280454451024665,.23319376459199048,.23319376459199048,.18629021092773426,.18629021092773426,.1255803694649046,.1255803694649046,.05566856711617366,.05566856711617366],[.24914704581340277,.24914704581340277,.2334925365383548,.2334925365383548,.20316742672306592,.20316742672306592,.16007832854334622,.16007832854334622,.10693932599531843,.10693932599531843,.04717533638651183,.04717533638651183],[.2325515532308739,.22628318026289723,.22628318026289723,.2078160475368885,.2078160475368885,.17814598076194574,.17814598076194574,.13887351021978725,.13887351021978725,.09212149983772845,.09212149983772845,.04048400476531588,.04048400476531588],[.2152638534631578,.2152638534631578,.2051984637212956,.2051984637212956,.18553839747793782,.18553839747793782,.15720316715819355,.15720316715819355,.12151857068790319,.12151857068790319,.08015808715976021,.08015808715976021,.03511946033175186,.03511946033175186],[.2025782419255613,.19843148532711158,.19843148532711158,.1861610000155622,.1861610000155622,.16626920581699392,.16626920581699392,.13957067792615432,.13957067792615432,.10715922046717194,.10715922046717194,.07036604748810812,.07036604748810812,.03075324199611727,.03075324199611727],[.1894506104550685,.1894506104550685,.18260341504492358,.18260341504492358,.16915651939500254,.16915651939500254,.14959598881657674,.14959598881657674,.12462897125553388,.12462897125553388,.09515851168249279,.09515851168249279,.062253523938647894,.062253523938647894,.027152459411754096,.027152459411754096],[.17944647035620653,.17656270536699264,.17656270536699264,.16800410215645004,.16800410215645004,.15404576107681028,.15404576107681028,.13513636846852548,.13513636846852548,.11188384719340397,.11188384719340397,.08503614831717918,.08503614831717918,.0554595293739872,.0554595293739872,.02414830286854793,.02414830286854793],[.1691423829631436,.1691423829631436,.16427648374583273,.16427648374583273,.15468467512626524,.15468467512626524,.14064291467065065,.14064291467065065,.12255520671147846,.12255520671147846,.10094204410628717,.10094204410628717,.07642573025488905,.07642573025488905,.0497145488949698,.0497145488949698,.02161601352648331,.02161601352648331],[.1610544498487837,.15896884339395434,.15896884339395434,.15276604206585967,.15276604206585967,.1426067021736066,.1426067021736066,.12875396253933621,.12875396253933621,.11156664554733399,.11156664554733399,.09149002162245,.09149002162245,.06904454273764123,.06904454273764123,.0448142267656996,.0448142267656996,.019461788229726478,.019461788229726478],[.15275338713072584,.15275338713072584,.14917298647260374,.14917298647260374,.14209610931838204,.14209610931838204,.13168863844917664,.13168863844917664,.11819453196151841,.11819453196151841,.10193011981724044,.10193011981724044,.08327674157670475,.08327674157670475,.06267204833410907,.06267204833410907,.04060142980038694,.04060142980038694,.017614007139152118,.017614007139152118],[.14608113364969041,.14452440398997005,.14452440398997005,.13988739479107315,.13988739479107315,.13226893863333747,.13226893863333747,.12183141605372853,.12183141605372853,.10879729916714838,.10879729916714838,.09344442345603386,.09344442345603386,.0761001136283793,.0761001136283793,.057134425426857205,.057134425426857205,.036953789770852494,.036953789770852494,.016017228257774335,.016017228257774335],[.13925187285563198,.13925187285563198,.13654149834601517,.13654149834601517,.13117350478706238,.13117350478706238,.12325237681051242,.12325237681051242,.11293229608053922,.11293229608053922,.10041414444288096,.10041414444288096,.08594160621706773,.08594160621706773,.06979646842452049,.06979646842452049,.052293335152683286,.052293335152683286,.03377490158481415,.03377490158481415,.0146279952982722,.0146279952982722],[.13365457218610619,.1324620394046966,.1324620394046966,.12890572218808216,.12890572218808216,.12304908430672953,.12304908430672953,.11499664022241136,.11499664022241136,.10489209146454141,.10489209146454141,.09291576606003515,.09291576606003515,.07928141177671895,.07928141177671895,.06423242140852585,.06423242140852585,.04803767173108467,.04803767173108467,.030988005856979445,.030988005856979445,.013411859487141771,.013411859487141771],[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872]],L=[[1],[1,1],[1,2,1],[1,3,3,1]],b=function(t,h,n,i){return new x(t,h,n,i)};x.prototype.getTotalLength=function(){return Math.sqrt(Math.pow(this.x0-this.x1,2)+Math.pow(this.y0-this.y1,2))},x.prototype.getPointAtLength=function(t){var h=t/Math.sqrt(Math.pow(this.x0-this.x1,2)+Math.pow(this.y0-this.y1,2)),n=(this.x1-this.x0)*h,i=(this.y1-this.y0)*h;return{x:this.x0+n,y:this.y0+i}},x.prototype.getTangentAtLength=function(){var t=Math.sqrt((this.x1-this.x0)*(this.x1-this.x0)+(this.y1-this.y0)*(this.y1-this.y0));return{x:(this.x1-this.x0)/t,y:(this.y1-this.y0)/t}},x.prototype.getPropertiesAtLength=function(t){var h=this.getPointAtLength(t),n=this.getTangentAtLength();return{x:h.x,y:h.y,tangentX:n.x,tangentY:n.y}};var A=function(t){function h(t){for(var s,r=v(t),a=[0,0],o=[0,0],u=0;u<r.length;u++)"M"===r[u][0]?(a=[r[u][1],r[u][2]],e.push(null)):"m"===r[u][0]?(a=[r[u][1]+a[0],r[u][2]+a[1]],e.push(null)):"L"===r[u][0]?(n+=Math.sqrt(Math.pow(a[0]-r[u][1],2)+Math.pow(a[1]-r[u][2],2)),e.push(new b(a[0],r[u][1],a[1],r[u][2])),a=[r[u][1],r[u][2]]):"l"===r[u][0]?(n+=Math.sqrt(Math.pow(r[u][1],2)+Math.pow(r[u][2],2)),e.push(new b(a[0],r[u][1]+a[0],a[1],r[u][2]+a[1])),a=[r[u][1]+a[0],r[u][2]+a[1]]):"H"===r[u][0]?(n+=Math.abs(a[0]-r[u][1]),e.push(new b(a[0],r[u][1],a[1],a[1])),a[0]=r[u][1]):"h"===r[u][0]?(n+=Math.abs(r[u][1]),e.push(new b(a[0],a[0]+r[u][1],a[1],a[1])),a[0]=r[u][1]+a[0]):"V"===r[u][0]?(n+=Math.abs(a[1]-r[u][1]),e.push(new b(a[0],a[0],a[1],r[u][1])),a[1]=r[u][1]):"v"===r[u][0]?(n+=Math.abs(r[u][1]),e.push(new b(a[0],a[0],a[1],a[1]+r[u][1])),a[1]=r[u][1]+a[1]):"z"===r[u][0]||"Z"===r[u][0]?(n+=Math.sqrt(Math.pow(r[0][1]-a[0],2)+Math.pow(r[0][2]-a[1],2)),e.push(new b(a[0],r[0][1],a[1],r[0][2])),a=[r[0][1],r[0][2]]):"C"===r[u][0]?(s=new d(a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4],r[u][5],r[u][6]),n+=s.getTotalLength(),a=[r[u][5],r[u][6]],e.push(s)):"c"===r[u][0]?(s=new d(a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4],a[0]+r[u][5],a[1]+r[u][6]),n+=s.getTotalLength(),a=[r[u][5]+a[0],r[u][6]+a[1]],e.push(s)):"S"===r[u][0]?(s=u>0&&["C","c","S","s"].indexOf(r[u-1][0])>-1?new d(a[0],a[1],2*a[0]-r[u-1][r[u-1].length-4],2*a[1]-r[u-1][r[u-1].length-3],r[u][1],r[u][2],r[u][3],r[u][4]):new d(a[0],a[1],a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4]),n+=s.getTotalLength(),a=[r[u][3],r[u][4]],e.push(s)):"s"===r[u][0]?(s=u>0&&["C","c","S","s"].indexOf(r[u-1][0])>-1?new d(a[0],a[1],a[0]+s.d.x-s.c.x,a[1]+s.d.y-s.c.y,a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]):new d(a[0],a[1],a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]),n+=s.getTotalLength(),a=[r[u][3]+a[0],r[u][4]+a[1]],e.push(s)):"Q"===r[u][0]?(s=new d(a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4]),n+=s.getTotalLength(),e.push(s),a=[r[u][3],r[u][4]],o=[r[u][1],r[u][2]]):"q"===r[u][0]?(s=new d(a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]),n+=s.getTotalLength(),o=[a[0]+r[u][1],a[1]+r[u][2]],a=[r[u][3]+a[0],r[u][4]+a[1]],e.push(s)):"T"===r[u][0]?(s=u>0&&["Q","q","T","t"].indexOf(r[u-1][0])>-1?new d(a[0],a[1],2*a[0]-o[0],2*a[1]-o[1],r[u][1],r[u][2]):new b(a[0],r[u][1],a[1],r[u][2]),e.push(s),n+=s.getTotalLength(),o=[2*a[0]-o[0],2*a[1]-o[1]],a=[r[u][1],r[u][2]]):"t"===r[u][0]&&(s=u>0&&["Q","q","T","t"].indexOf(r[u-1][0])>-1?new d(a[0],a[1],2*a[0]-o[0],2*a[1]-o[1],a[0]+r[u][1],a[1]+r[u][2]):new b(a[0],a[0]+r[u][1],a[1],a[1]+r[u][2]),n+=s.getTotalLength(),o=[2*a[0]-o[0],2*a[1]-o[1]],a=[r[u][1]+a[0],r[u][2]+a[0]],e.push(s)),i.push(n);return h}var n=0,i=[],e=[];h.getTotalLength=function(){return n},h.getPointAtLength=function(t){var h=s(t);return e[h.i].getPointAtLength(h.fraction)},h.getTangentAtLength=function(t){var h=s(t);return e[h.i].getTangentAtLength(h.fraction)},h.getPropertiesAtLength=function(t){var h=s(t);return e[h.i].getPropertiesAtLength(h.fraction)};var s=function(t){t<0?t=0:t>n&&(t=n);for(var h=i.length-1;i[h]>=t&&i[h]>0;)h--;return h++,{fraction:t-i[h-1],i:h}};return h(t)};t.svgPathProperties=A,t.parse=v,t.Bezier=d,Object.defineProperty(t,"__esModule",{value:!0})});

package.json

 {
   "name": "svg-path-properties",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Calculate the length for an SVG path, to use it with node or a Canvas element",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -33,3 +33,4 @@ [![Build Status](https://travis-ci.org/rveciana/svg-path-properties.svg?branch=master)](https://travis-ci.org/rveciana/svg-path-properties)
 
-http://bl.ocks.org/hnakamur/e7efd0602bfc15f66fc5, https://gist.github.com/tunght13488/6744e77c242cc7a94859 and http://stackoverflow.com/questions/11854907/calculate-the-length-of-a-segment-of-a-quadratic-bezier
+http://bl.ocks.org/hnakamur/e7efd0602bfc15f66fc5, https://gist.github.com/tunght13488/6744e77c242cc7a94859, http://stackoverflow.com/questions/11854907/calculate-the-length-of-a-segment-of-a-quadratic-bezier and
+http://pomax.github.io/bezierinfo
 
@@ -36,0 +37,0 @@ For path parsing:

src/bezier.js

@@ -17,5 +17,7 @@ //Calculate Bezier curve length and positionAtLength
     this.getPoint = cubicPoint;
+    this.getDerivative = cubicDerivative;
   } else {
     this.getArcLength = getQuadraticArcLength;
     this.getPoint = quadraticPoint;
+    this.getDerivative = quadraticDerivative;
   }
@@ -38,20 +40,74 @@
   getPointAtLength: function(length) {
-    var error = 1;
-    var t = length/this.length;
+    var t = t2length(length, this.length, this.getArcLength,
+                    [this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y]);
 
-    while (error > 0.008){
+    return this.getPoint([this.a.x, this.b.x, this.c.x, this.d.x],
+                                    [this.a.y, this.b.y, this.c.y, this.d.y],
+                                  t);
+  },
+  getTangentAtLength: function(length){
+    var t = t2length(length, this.length, this.getArcLength,
+                    [this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y]);
 
-      var calcLength = this.getArcLength([this.a.x, this.b.x, this.c.x, this.d.x],
-                                      [this.a.y, this.b.y, this.c.y, this.d.y],
-                                    t);
-      error = Math.abs(length - calcLength)/this.length;
-      t = t + (length-calcLength)/this.length;
+    var derivative = this.getDerivative([this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y], t);
+    var mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
+    var tangent;
+    if (mdl > 0){
+      tangent = {x: derivative.x/mdl, y: derivative.y/mdl};
+    } else {
+      tangent = {x: 0, y: 0};
     }
+    return tangent;
+  },
+  getPropertiesAtLength: function(length){
+    var t = t2length(length, this.length, this.getArcLength,
+                    [this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y]);
 
-    return this.getPoint([this.a.x, this.b.x, this.c.x, this.d.x],
+    var derivative = this.getDerivative([this.a.x, this.b.x, this.c.x, this.d.x],
+                    [this.a.y, this.b.y, this.c.y, this.d.y], t);
+    var mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
+    var tangent;
+    if (mdl > 0){
+      tangent = {x: derivative.x/mdl, y: derivative.y/mdl};
+    } else {
+      tangent = {x: 0, y: 0};
+    }
+    var point = this.getPoint([this.a.x, this.b.x, this.c.x, this.d.x],
                                     [this.a.y, this.b.y, this.c.y, this.d.y],
                                   t);
+    return {x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y};
   }
 };
 
+function quadraticDerivative(xs, ys, t){
+  return {x: (1 - t) * 2*(xs[1] - xs[0]) +t * 2*(xs[2] - xs[1]),
+    y: (1 - t) * 2*(ys[1] - ys[0]) +t * 2*(ys[2] - ys[1])
+  };
+}
+
+function cubicDerivative(xs, ys, t){
+  var derivative = quadraticPoint(
+            [3*(xs[1] - xs[0]), 3*(xs[2] - xs[1]), 3*(xs[3] - xs[2])],
+            [3*(ys[1] - ys[0]), 3*(ys[2] - ys[1]), 3*(ys[3] - ys[2])],
+            t);
+  return derivative;
+}
+
+function t2length(length, total_length, func, xs, ys){
+  var error = 1;
+  var t = length/total_length;
+
+  while (error > 0.008){
+
+    var calcLength = func(xs, ys, t);
+    error = Math.abs(length - calcLength)/total_length;
+    t = t + (length-calcLength)/total_length;
+  }
+  return t;
+}
+
 function quadraticPoint(xs, ys, t){
@@ -58,0 +114,0 @@ var x = (1 - t) * (1 - t) * xs[0] + 2 * (1 - t) * t * xs[1] + t * t * xs[2];

src/linear.js

@@ -26,1 +26,11 @@ export default function(x0, x1, y0, y1) {
 };
+LinearPosition.prototype.getTangentAtLength = function(){
+  var module = Math.sqrt((this.x1 - this.x0) * (this.x1 - this.x0) +
+              (this.y1 - this.y0) * (this.y1 - this.y0));
+  return { x: (this.x1 - this.x0)/module, y: (this.y1 - this.y0)/module };
+};
+LinearPosition.prototype.getPropertiesAtLength = function(pos){
+  var point = this.getPointAtLength(pos);
+  var tangent = this.getTangentAtLength();
+  return {x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y};
+};

src/path-properties.js

@@ -29,7 +29,6 @@ import parse from "./parse";
         cur = [parsed[i][1], parsed[i][2]];
-
       } else if(parsed[i][0] === "l"){
         length = length + Math.sqrt(Math.pow(parsed[i][1], 2) + Math.pow(parsed[i][2], 2));
+        functions.push(new LinearPosition(cur[0], parsed[i][1] + cur[0], cur[1], parsed[i][2] + cur[1]));
         cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
-        functions.push();
       } else if(parsed[i][0] === "H"){
@@ -51,3 +50,2 @@ length = length + Math.abs(cur[0] - parsed[i][1]);
         cur[1] = parsed[i][1] + cur[1];
-        functions.push();
       //Close path
@@ -136,2 +134,17 @@ }  else if(parsed[i][0] === "z" || parsed[i][0] === "Z"){
   svgProperties.getPointAtLength = function(fractionLength){
+    var fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getPointAtLength(fractionPart.fraction);
+  };
+
+  svgProperties.getTangentAtLength = function(fractionLength){
+    var fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getTangentAtLength(fractionPart.fraction);
+  };
+
+  svgProperties.getPropertiesAtLength = function(fractionLength){
+    var fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getPropertiesAtLength(fractionPart.fraction);
+  };
+
+  var getPartAtLength = function(fractionLength){
     if(fractionLength < 0){
@@ -149,4 +162,3 @@ fractionLength = 0;
     i++;
-    var fractionPart = fractionLength-partial_lengths[i-1];
-    return functions[i].getPointAtLength(fractionPart);
+    return {fraction: fractionLength-partial_lengths[i-1], i: i};
   };
@@ -153,0 +165,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

255133

increased by155.84%

Number of package files

23

increased by76.92%

Lines of code

1500

increased by59.57%

Number of lines in readme file

39

increased by2.63%

No dependency changes