support native DOMMatrix and/or CSSMatrix for transform

[justin-hackin]

SVGPathCommander can use the DOMMatrix API for SVGPathElement path command transformation and implements a very fast and modernized DOMMatrix shim.

It would be helpful if the transform function would accept the same type as the parameter to CSSMatrix.fromMatrix so that native DOMMatrix objects or CSSMatrix could be used. They are useful for rendering transform strings when sharing transforms between SVGPathCommander and native SVG transform attributes.

The getSVGMatrix utility we developed will always compute the matrix by applying the transform functions in the following order: translate, rotate, skew and scale, which is the default composition/recomposition order specified in the W3C draft

My IDE attempted to import this function as such

import getSVGMatrix from 'svg-path-commander/src/process/getSVGMatrix';

but that crashed my build ("vite": "^3.2.6")

 [plugin vite:dep-scan] Missing "./src/process/getSVGMatrix" export in "svg-path-commander" package

    src/widgets/PyramidNet/models/PyramidNetWidgetStore.tsx:18:25:
      18 │ import getSVGMatrix from 'svg-path-commander/src/process/getSVGMatrix';
         ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1260:20:
      1260 │       let promise = setup({
           ╵                     ^

So I had to copy the file into my project and write a wrapper to do the transformation as such

export function convertTransformObjectToDOMMatrixReadOnly(trans: Partial<TransformObject>): DOMMatrixReadOnly {
  const cssMatrix = getSVGMatrix({
    ...trans,
    origin: [0, 0, 0],
  });
  const arr = CSSMatrix.toArray(cssMatrix, true) as Matrix;
  return new DOMMatrixReadOnly(arr);
}

P.S. Thanks for making this, one of my projects has a fluent interface for building path data and I decided to give this a try for parsing instead of svgpath. It's got some extra features that seem quite useful.

[thednp]

Somebody posted a PR with a similar modification. The answer is basically the same: we cannot use the SVG transform property string with DOMMatrix/CSSMatrix, it's a different thing. We always use a certain type of value for consistency.

Instead of

import getSVGMatrix from 'svg-path-commander/src/process/getSVGMatrix';

you should do

import SVGPathCommander from 'svg-path-commander';

const { getSVGMatrix } = SVGPathCommander;

// do your thing

Vite has changed how tree shaking works and this is currently the only way I know to work unfortunately.

[justin-hackin]

Oh, good tip, thanks @thednp . Since I'm maintaining a subset of the SVG commands that are absolute, perhaps I will further constrain it to not use arc command using a conversion to cubic so that all the transforms are straightforward point mappings.