Edit Question - KnowledgeHub

Title Body

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: 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

Tags (comma-separated) Cancel