svg-path-commander icon indicating copy to clipboard operation
svg-path-commander copied to clipboard

Transformation of the path containing the arch

Open Xyu-xyu opened this issue 1 year ago • 1 comments

The error in the size of the element after the transformation of the path containing the arch reaches 0.2-0.04.

for path d="M297.334,355.734 A2,2 0 0 1 294.667,353.848 A15,15 0 0 1 324.667,353.848 A15,15 0 0 1 294.667,353.848 " heigth 30. After transform: const transform = { origin:[0,0], scale: [1.004529989207172, 1] , translate:[ -11.871495599548004, 0] } SVGPathCommander(path, {round:'false'}).optimize().transform(transform).toString(); heigth is 30.044 ?? Transformation along the y axis does not lead to such an effect. The size remains 30. Is this within the margin of error? Or are there any ways to avoid this?

Xyu-xyu avatar Nov 02 '23 12:11 Xyu-xyu

There are a couple of things to explain:

  • The Arc path command will be converted to CubicBezier based on an approximation formula, it is expected to get some minor differences.
  • If you increase the scale even only for X axis, because the transformed path command coordinates are calculated with matrix, all values will be "touched", it's how the SVG metric system is supposed to work.
  • The effect of the two above is amplified because you optimize the path BEFORE transformation (you're removing one or more decimals), it's important to keep consistency in check so try and use optimize AFTER transformation, generally as the last method call.

Hope this helps.

thednp avatar Nov 02 '23 14:11 thednp