From 525ad70e2593500188e2a81d2759e726d4277049 Mon Sep 17 00:00:00 2001
From: Daybrush <daybrush@gmail.com>
Date: Mon, 2 May 2022 21:51:59 +0900
Subject: [PATCH] fix: fix svg matrixes #643

---
 packages/react-moveable/src/react-moveable/utils.tsx     | 9 +++++----
 .../react-moveable/stories/4-SVG/apps/ReactSVGGApp.tsx   | 5 +++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx
index cdc131349..f49d3b58d 100644
--- a/packages/react-moveable/src/react-moveable/utils.tsx
+++ b/packages/react-moveable/src/react-moveable/utils.tsx
@@ -105,14 +105,15 @@ export function getElementTransform(
             return "";
         }
 
-        const matrixs: string[] = [];
+        const matrixes: string[] = [];
 
         for (let i = 0; i < length; ++i) {
-            const matrix = baseVal[0].matrix;
+            const matrix = baseVal[i].matrix;
 
-            matrixs.push(`matrix(${(["a", "b", "c", "d", "e", "f"] as const).map(chr => matrix[chr]).join(", ")})`);
+            matrixes.push(`matrix(${(["a", "b", "c", "d", "e", "f"] as const).map(chr => matrix[chr]).join(", ")})`);
         }
-        return matrixs.join(" ");
+        return matrixes.join(" ");
+
     }
     return "";
 }
diff --git a/packages/react-moveable/stories/4-SVG/apps/ReactSVGGApp.tsx b/packages/react-moveable/stories/4-SVG/apps/ReactSVGGApp.tsx
index 76c09b75d..8753cc130 100644
--- a/packages/react-moveable/stories/4-SVG/apps/ReactSVGGApp.tsx
+++ b/packages/react-moveable/stories/4-SVG/apps/ReactSVGGApp.tsx
@@ -20,15 +20,16 @@ export default function App(props: Record<string, any>) {
                     left: "100px",
                 }}>
                     <g
+                        transform="translate(10, 10) rotate(0)"
                         style={{
-                            transform: "translate(10px, 10px) rotate(20deg)",
+                            // transform: "translate(10px, 10px) rotate(20deg)",
                         }}
                     >
                         <path d="M 0 0 L 200 0 L 200 200 z" ref={targetRef} style={{
                             fill: "white",
                             stroke: "red",
                             strokeWidth: 2,
-                            transform: "translate(10px, 10px) rotate(20deg)",
+                            // transform: "translate(10px, 10px) rotate(20deg)",
                         }} />
                     </g>
                 </svg>