tl;dr summary: Give me the resources or help fix the below code to transform path commands for SVG <path> elements by an arbitrary matrix.

details:
I'm writing a library to convert any arbitrary SVG shape into a <path> element. I have it working when there are no transform="..." elements in the hierarchy, but now I want to bake the local transform of the object into the path data commands themselves.

This is mostly working (code below) when dealing with the simple moveto/lineto commands. However, I'm not sure of the appropriate way to transform the bezier handles or arcTo parameters.

For example, I am able to convert this rounded rectangle to a <path>:

<rect x="10" y="30" rx="10" ry="20" width="80" height="70" />
--> <path d=​"M20,30 L80,30 A10,20,0,0,1,90,50 L90,80 A10,20,0,0,1,80,100
             L20,100 A10,20,0,0,1,10,80 L10,50 A10,20,0,0,1,20,30" />

And I get a valid result when transforming without any round corners:

<rect x="10" y="30" width="80" height="70"
      transform="translate(-200,0) scale(1.5) rotate(50)" />
--> <path d=​"M10,30 L90,30 L90,100 L10,100 L10,30" />

However, transforming only the x/y coords of the elliptical arc commands yields amusing results: Rounded rectangle with green blobs oozing from the corners outside the boundary
The dotted line is the actual transformed rect, the green fill is my path.

Following is the code I have so far (slightly pared-down). I also have a test page where I'm testing various shapes. Please help me determin

javascript svg 2d transform
Edit
Report