I had some paths that use a combination of Bezier Curves and Linear segments. Every time I reached a linear segment, the tangents would be pointing in the wrong direction.

let path = "M 930 197 L 639 904 L 462 828 L 751 118 Z M 555 183 L 249 896 L 70 810 L 385 96 Z";
let properties = new SVGPathProperties(path);
let p1 = properties.getPointAtLength(8);
let p2 = properties.getPointAtLength(10);
let dx = (p2.x - p1.x)
let dy = (p2.y - p1.y)
let length = Math.sqrt(dx*dx + dy*dy)
let expected = {x: dx/length, y: dy/length}
let actual = properties.getTangentAtLength(9);
console.log({expected, actual})

{
  expected: { x: -0.3806182308124968, y: 0.9247322652385203 },
  actual: { x: -0.38061823081246554, y: 0.9247322652385331 }
}

this is because getTangentAtLength for LinearPosition has negative signs on both the x and y component for some reason:

    return {
      x: -(this.x1 - this.x0) / module,
      y: -(this.y1 - this.y0) / module,
    };

Issue introduced in this commit on Sep 14, 2022: https://github.com/rveciana/svg-path-properties/commit/eab0526fa8a71bb40a0c2a97139acc094eae3a6b

The tangents for points along a LinearPosition are current pointing in the wrong direction. Fixes Issue #63

I had some paths that use a combination of Bezier Curves and Linear segments. Every time I reached a linear segment, the tangents would be pointing in the wrong direction.

let path = "M 930 197 L 639 904 L 462 828 L 751 118 Z M 555 183 L 249 896 L 70 810 L 385 96 Z";
let properties = new SVGPathProperties(path);
let p1 = properties.getPointAtLength(8);
let p2 = properties.getPointAtLength(9);
let dx = (p2.x - p1.x)
let dy = (p2.y - p1.y)
let length = Math.sqrt(dx*dx + dy*dy)
let expected = {x: dx/length, y: dy/length}
let actual = properties.getTangentAtLength(10);
console.log({expected, actual})

{
  expected: { x: -0.3806182308124968, y: 0.9247322652385203 },
  actual: { x: 0.38061823081246554, y: -0.9247322652385331 }
}

this is because getTangentAtLength for LinearPosition has negative signs on both the x and y component for some reason:

    return {
      x: -(this.x1 - this.x0) / module,
      y: -(this.y1 - this.y0) / module,
    };

Issue introduced in this commit on Sep 14, 2022: https://github.com/rveciana/svg-path-properties/commit/eab0526fa8a71bb40a0c2a97139acc094eae3a6b

The following paths will cause getTotalLength() to return Infinity.

• example 1: "Q 0 0 267 0 Q 391 0 512 0"
• example 2:"Q 0 0 267 10 Q 391 10 512 10"

It ends up using getQuadraticArcLength() in bezier-functions.

• It returns Infinity because term is infinity.
• term is Infinity because Math.log(-0) is -Infinity
• this only happens when (u + uuk) / (b + bbk) is zero or negative zero
• this happens when (u + uuk) is 0, but (b + bbk) is very small but non-zero due to float precision during Math.sqrt

In example 1 ("Q 0 0 267 0 Q 391 0 512 0"), we get the following:

• getQuadraticArcLength([ 267, 391, 512, 0 ], [ 0, 0, 0, 0 ], 1)
• A = 36, B = -2976, C = 61504
• k = -2.2737367544323206e-13
• u = -40.333333333333336
• b = -41.333333333333336
• Math.sqrt(u * u + k) = 40.333333333333336
• Math.sqrt(b * b + k) = 41.33333333333333
• (u + uuk) = 0
• (b + bbk) = -7.105427357601002e-15
• term = Infinity

Fix for issue: https://github.com/rveciana/svg-path-properties/issues/61

TLDR: The path "Q 0 0 267 0 Q 391 0 512 0 "causes getTotalLength() to return Infinity. This PR will have it return 0 in that case.

The following paths will cause getTotalLength() to return Infinity.

• example 1: "Q 0 0 267 0 Q 391 0 512 0"
• example 2:"Q 0 0 267 10 Q 391 10 512 10"

It ends up using getQuadraticArcLength() in bezier-functions.

• It returns Infinity because term is infinity.
• term is Infinity because Math.log(-0) is -Infinity
• this only happens when (u + uuk) / (b + bbk) is zero or negative zero
• this happens when (u + uuk) is 0, but (b + bbk) is very small but non-zero due to float precision during Math.sqrt

In example 1 ("Q 0 0 267 0 Q 391 0 512 0"), we get the following:

• getQuadraticArcLength([ 267, 391, 512, 0 ], [ 0, 0, 0, 0 ], 1)
• A = 36, B = -2976, C = 61504
• k = -2.2737367544323206e-13
• u = -40.333333333333336
• b = -41.333333333333336
• Math.sqrt(u * u + k) = 40.333333333333336
• Math.sqrt(b * b + k) = 41.33333333333333
• (u + uuk) = 0
• (b + bbk) = -7.105427357601002e-15
• term = Infinity