diff --git a/__tests__/integration/components/axis/axis-animation-update-12.ts b/__tests__/integration/components/axis/axis-animation-update-12.ts
index 6c34e8e3a..03db69746 100644
--- a/__tests__/integration/components/axis/axis-animation-update-12.ts
+++ b/__tests__/integration/components/axis/axis-animation-update-12.ts
@@ -14,7 +14,7 @@ export const AxisAnimationUpdate12 = () => {
   const g1 = group.appendChild(
     new Group({
       style: {
-        transform: 'translate(100, 100)',
+        transform: [['translate', 100, 100]],
       },
     })
   );
@@ -22,7 +22,7 @@ export const AxisAnimationUpdate12 = () => {
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: 'translate(50, 50)',
+        transform: [['translate', 50, 50]],
       },
     })
   );
diff --git a/__tests__/integration/components/axis/axis-animation-update-13.ts b/__tests__/integration/components/axis/axis-animation-update-13.ts
index a8c18028d..ca0c5fa62 100644
--- a/__tests__/integration/components/axis/axis-animation-update-13.ts
+++ b/__tests__/integration/components/axis/axis-animation-update-13.ts
@@ -13,7 +13,7 @@ export const AxisAnimationUpdate13 = () => {
   group.appendChild(
     new Group({
       style: {
-        transform: 'translate(100, 100)',
+        transform: [['translate', 100, 100]],
       },
     })
   );
@@ -21,7 +21,7 @@ export const AxisAnimationUpdate13 = () => {
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: 'translate(50, 50)',
+        transform: [['translate', 50, 50]],
       },
     })
   );
diff --git a/__tests__/integration/components/axis/axis-linear-custom-tick.ts b/__tests__/integration/components/axis/axis-linear-custom-tick.ts
index f763634ed..ca1a1f2d3 100644
--- a/__tests__/integration/components/axis/axis-linear-custom-tick.ts
+++ b/__tests__/integration/components/axis/axis-linear-custom-tick.ts
@@ -19,7 +19,7 @@ export const AxisLinearCustomTick = () => {
         tickFormatter: (datum: any, index: number, data: any, [cx, cy]: any) => {
           if (index === 3)
             return new Rect({
-              style: { x: 0, y: 0, width: 20, height: 20, fill: 'green', transform: 'translate(-10, -10)' },
+              style: { x: 0, y: 0, width: 20, height: 20, fill: 'green', transform: [['translate', -10, -10]] },
             });
           return index % 5 === 0
             ? new Circle({ style: { cx: 0, cy: 0, r: index % 10 === 0 ? 10 : 5 } })
diff --git a/__tests__/integration/components/axis/axis-linear-label.ts b/__tests__/integration/components/axis/axis-linear-label.ts
index a28e0f46a..2bc44c653 100644
--- a/__tests__/integration/components/axis/axis-linear-label.ts
+++ b/__tests__/integration/components/axis/axis-linear-label.ts
@@ -43,14 +43,14 @@ export const AxisLinearLabel = () => {
         y: 0,
         width: 30,
         height: 30,
-        transform: 'translate(-15, -15)',
+        transform: [['translate', -15, -15]],
       },
     });
     const labelText = new Text({
       style: {
         text,
         textAlign: 'center',
-        transform: 'translate(0, 30)',
+        transform: [['translate', 0, 30]],
       },
     });
     labelGroup.appendChild(labelIcon);
diff --git a/__tests__/integration/components/axis/axis-linear-title-position.ts b/__tests__/integration/components/axis/axis-linear-title-position.ts
index 7db56f32a..161cc2213 100644
--- a/__tests__/integration/components/axis/axis-linear-title-position.ts
+++ b/__tests__/integration/components/axis/axis-linear-title-position.ts
@@ -69,7 +69,7 @@ export const AxisLinearTitlePosition = () => {
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: 'translate(60, 60)',
+        transform: [['translate', 60, 60]],
       },
     })
   );
diff --git a/__tests__/integration/components/checkbox/checkbox1.ts b/__tests__/integration/components/checkbox/checkbox1.ts
index 47c8a3c6c..5ebbfdfe3 100644
--- a/__tests__/integration/components/checkbox/checkbox1.ts
+++ b/__tests__/integration/components/checkbox/checkbox1.ts
@@ -7,7 +7,7 @@ export function Checkbox1() {
   group.appendChild(
     new Checkbox({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         labelText: 'Checkbox',
       },
     })
@@ -16,7 +16,7 @@ export function Checkbox1() {
   const ck = group.appendChild(
     new Checkbox({
       style: {
-        transform: 'translate(10, 30)',
+        transform: [['translate', 10, 30]],
         labelText: 'Checkbox',
         checked: true,
       },
diff --git a/__tests__/integration/components/indicator/indicator.ts b/__tests__/integration/components/indicator/indicator.ts
index 3c048620f..2396064e5 100644
--- a/__tests__/integration/components/indicator/indicator.ts
+++ b/__tests__/integration/components/indicator/indicator.ts
@@ -6,7 +6,7 @@ import { createGrid } from '../../utils/grid';
 export const IndicatorDemo = () => {
   const group = new Group({
     style: {
-      transform: 'translate(30, 30)',
+      transform: [['translate', 30, 30]],
     },
   });
 
diff --git a/__tests__/integration/components/legend/category-item-5.ts b/__tests__/integration/components/legend/category-item-5.ts
index c9b235de2..fabfa28e8 100644
--- a/__tests__/integration/components/legend/category-item-5.ts
+++ b/__tests__/integration/components/legend/category-item-5.ts
@@ -26,7 +26,7 @@ export const CategoryItem5 = () => {
               width: 10,
               height: 10,
               transformOrigin: 'center',
-              transform: 'rotate(45)',
+              transform: [['rotate', 45]],
             },
           }),
       },
diff --git a/__tests__/integration/components/legend/category-item-marker-1.ts b/__tests__/integration/components/legend/category-item-marker-1.ts
index cf761c5e5..ed1efda2a 100644
--- a/__tests__/integration/components/legend/category-item-marker-1.ts
+++ b/__tests__/integration/components/legend/category-item-marker-1.ts
@@ -28,7 +28,7 @@ export const CategoryItemMarker1 = () => {
                     width: 10,
                     height: 10,
                     transformOrigin: 'center',
-                    transform: 'rotate(45)',
+                    transform: [['rotate', 45]],
                   },
                 })
             : () =>
diff --git a/__tests__/integration/components/legend/category-position-2.ts b/__tests__/integration/components/legend/category-position-2.ts
index 700ec4384..c0b25b660 100644
--- a/__tests__/integration/components/legend/category-position-2.ts
+++ b/__tests__/integration/components/legend/category-position-2.ts
@@ -8,7 +8,7 @@ export const CategoryPosition2 = () => {
   const g = group.appendChild(
     new Group({
       style: {
-        transform: 'translate(50, 50)',
+        transform: [['translate', 50, 50]],
       },
     })
   );
diff --git a/__tests__/integration/components/marker/marker-1.ts b/__tests__/integration/components/marker/marker-1.ts
index c97c6b53c..547993d4f 100644
--- a/__tests__/integration/components/marker/marker-1.ts
+++ b/__tests__/integration/components/marker/marker-1.ts
@@ -16,7 +16,7 @@ export const Marker1 = () => {
           y,
           // transform: `translate(${x}, ${y}) rotate(45deg) translate(${-x}, ${-y})`,
           // transformOrigin: `0 0`,
-          transform: 'rotate(45deg)',
+          transform: [['rotate', 45]],
           transformOrigin: `${x} ${y}`,
           symbol: marker,
           size: 16,
diff --git a/__tests__/integration/components/sparkline/sparkline-10.ts b/__tests__/integration/components/sparkline/sparkline-10.ts
index 1f53fa44e..2c34dc790 100644
--- a/__tests__/integration/components/sparkline/sparkline-10.ts
+++ b/__tests__/integration/components/sparkline/sparkline-10.ts
@@ -7,7 +7,7 @@ export const Sparkline10 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-11.ts b/__tests__/integration/components/sparkline/sparkline-11.ts
index 433a43459..1c08e9357 100644
--- a/__tests__/integration/components/sparkline/sparkline-11.ts
+++ b/__tests__/integration/components/sparkline/sparkline-11.ts
@@ -7,7 +7,7 @@ export const Sparkline11 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-12.ts b/__tests__/integration/components/sparkline/sparkline-12.ts
index 91819df3a..12f1a9f06 100644
--- a/__tests__/integration/components/sparkline/sparkline-12.ts
+++ b/__tests__/integration/components/sparkline/sparkline-12.ts
@@ -7,7 +7,7 @@ export const Sparkline12 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-2.ts b/__tests__/integration/components/sparkline/sparkline-2.ts
index d2b76c2f3..345fa8cb9 100644
--- a/__tests__/integration/components/sparkline/sparkline-2.ts
+++ b/__tests__/integration/components/sparkline/sparkline-2.ts
@@ -7,7 +7,7 @@ export const Sparkline2 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-3.ts b/__tests__/integration/components/sparkline/sparkline-3.ts
index 0f1a3c982..3b61bc8a9 100644
--- a/__tests__/integration/components/sparkline/sparkline-3.ts
+++ b/__tests__/integration/components/sparkline/sparkline-3.ts
@@ -7,7 +7,7 @@ export const Sparkline3 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-4.ts b/__tests__/integration/components/sparkline/sparkline-4.ts
index a93e466e7..85287615e 100644
--- a/__tests__/integration/components/sparkline/sparkline-4.ts
+++ b/__tests__/integration/components/sparkline/sparkline-4.ts
@@ -7,7 +7,7 @@ export const Sparkline4 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-5.ts b/__tests__/integration/components/sparkline/sparkline-5.ts
index fb78f0aea..2d21aae6e 100644
--- a/__tests__/integration/components/sparkline/sparkline-5.ts
+++ b/__tests__/integration/components/sparkline/sparkline-5.ts
@@ -7,7 +7,7 @@ export const Sparkline5 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-6.ts b/__tests__/integration/components/sparkline/sparkline-6.ts
index 4a106b34a..653c393b4 100644
--- a/__tests__/integration/components/sparkline/sparkline-6.ts
+++ b/__tests__/integration/components/sparkline/sparkline-6.ts
@@ -7,7 +7,7 @@ export const Sparkline6 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-7.ts b/__tests__/integration/components/sparkline/sparkline-7.ts
index 351ef7020..c9ca4757f 100644
--- a/__tests__/integration/components/sparkline/sparkline-7.ts
+++ b/__tests__/integration/components/sparkline/sparkline-7.ts
@@ -7,7 +7,7 @@ export const Sparkline7 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-8.ts b/__tests__/integration/components/sparkline/sparkline-8.ts
index 67e08d090..55a002e6b 100644
--- a/__tests__/integration/components/sparkline/sparkline-8.ts
+++ b/__tests__/integration/components/sparkline/sparkline-8.ts
@@ -7,7 +7,7 @@ export const Sparkline8 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-9.ts b/__tests__/integration/components/sparkline/sparkline-9.ts
index e9d16118c..dce87ee1c 100644
--- a/__tests__/integration/components/sparkline/sparkline-9.ts
+++ b/__tests__/integration/components/sparkline/sparkline-9.ts
@@ -7,7 +7,7 @@ export const Sparkline9 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: 'translate(10, 10)',
+        transform: [['translate', 10, 10]],
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-scale-line.ts b/__tests__/integration/components/sparkline/sparkline-scale-line.ts
index b4c932e8b..d0b177fff 100644
--- a/__tests__/integration/components/sparkline/sparkline-scale-line.ts
+++ b/__tests__/integration/components/sparkline/sparkline-scale-line.ts
@@ -3,7 +3,7 @@ import { it } from '../../utils';
 import { Sparkline } from '../../../../src/ui/sparkline';
 
 export const SparklineScaleLine = it((group) => {
-  const shape1 = { transform: 'translate(10, 10)', width: 300, height: 50 };
+  const shape1 = { transform: [['translate', 10, 10]], width: 300, height: 50 };
   group.appendChild(
     new Rect({
       style: {
@@ -33,7 +33,7 @@ export const SparklineScaleLine = it((group) => {
     })
   );
 
-  const shape2 = { transform: 'translate(10, 70)', width: 300, height: 50 };
+  const shape2 = { transform: [['translate', 10, 70]], width: 300, height: 50 };
 
   group.appendChild(
     new Rect({
diff --git a/__tests__/integration/components/switch/switch-1.ts b/__tests__/integration/components/switch/switch-1.ts
index e656890cb..e36fd3fd1 100644
--- a/__tests__/integration/components/switch/switch-1.ts
+++ b/__tests__/integration/components/switch/switch-1.ts
@@ -15,7 +15,7 @@ export const Switch1 = () => {
   group.appendChild(
     new Switch({
       style: {
-        transform: 'translateY(40)',
+        transform: [['translateY', 40]],
         checked: true,
       },
     })
@@ -24,7 +24,7 @@ export const Switch1 = () => {
   const sw = group.appendChild(
     new Switch({
       style: {
-        transform: 'translateY(80)',
+        transform: [['translateY', 80]],
         checked: false,
       },
     })
diff --git a/__tests__/integration/components/tag/tag-1.ts b/__tests__/integration/components/tag/tag-1.ts
index ca670e998..f4441d7fe 100644
--- a/__tests__/integration/components/tag/tag-1.ts
+++ b/__tests__/integration/components/tag/tag-1.ts
@@ -7,7 +7,7 @@ export const Tag1 = () => {
   group.appendChild(
     new Tag({
       style: {
-        transform: 'translate(100, 100)',
+        transform: [['translate', 100, 100]],
         text: 'G2',
       },
     })
@@ -16,7 +16,7 @@ export const Tag1 = () => {
   group.appendChild(
     new Tag({
       style: {
-        transform: 'translate(200, 100)',
+        transform: [['translate', 200, 100]],
         text: 'G6',
         backgroundFill: '#DBF1B7',
         labelFill: 'red',
@@ -32,7 +32,7 @@ export const Tag1 = () => {
   const tag = group.appendChild(
     new Tag({
       style: {
-        transform: 'translate(300, 100)',
+        transform: [['translate', 300, 100]],
         text: 'L7',
         radius: 6,
         padding: [6, 24],
diff --git a/__tests__/integration/components/title/title.ts b/__tests__/integration/components/title/title.ts
index 1c0ee2ac2..d19345f3e 100644
--- a/__tests__/integration/components/title/title.ts
+++ b/__tests__/integration/components/title/title.ts
@@ -54,7 +54,7 @@ export const TitleDemo = () => {
     {
       text: 'left top start',
       position: 'left-top',
-      transform: 'rotate(90)',
+      transform: [['rotate', 90]],
       textAlign: 'start',
       textBaseline: 'bottom',
     }
diff --git a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexCenter.svg b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexCenter.svg
index e1cf2b40b..2747b91f4 100644
--- a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexCenter.svg
+++ b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexCenter.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,0,45)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,45)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,20,45)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -481,7 +481,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,30,45)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -490,7 +490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,40,45)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexEnd.svg b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexEnd.svg
index e1cf2b40b..5bed6a794 100644
--- a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexEnd.svg
+++ b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexEnd.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,90)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,20,90)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -481,7 +481,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,30,90)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -490,7 +490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,40,90)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexStart.svg b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexStart.svg
index e1cf2b40b..c9d1b5587 100644
--- a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexStart.svg
+++ b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexStart.svg
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,0)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,20,0)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -481,7 +481,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,30,0)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -490,7 +490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,40,0)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexDirectionColumn.svg b/__tests__/integration/snapshots/LayoutFlexDirectionColumn.svg
index 2aec45732..b47b68cac 100644
--- a/__tests__/integration/snapshots/LayoutFlexDirectionColumn.svg
+++ b/__tests__/integration/snapshots/LayoutFlexDirectionColumn.svg
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,10)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,20)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -481,7 +481,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,30)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -490,7 +490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,40)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
@@ -499,7 +499,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,50)">
             <path
               id="g-svg-10"
               fill="rgba(255,165,0,1)"
@@ -508,7 +508,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,60)">
             <path
               id="g-svg-11"
               fill="rgba(128,0,128,1)"
@@ -517,7 +517,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,70)">
             <path
               id="g-svg-12"
               fill="rgba(0,255,255,1)"
@@ -526,7 +526,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,80)">
             <path
               id="g-svg-13"
               fill="rgba(255,0,255,1)"
@@ -535,7 +535,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-14"
               fill="rgba(165,42,42,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexDirectionRow.svg b/__tests__/integration/snapshots/LayoutFlexDirectionRow.svg
index 2aec45732..f3c099d56 100644
--- a/__tests__/integration/snapshots/LayoutFlexDirectionRow.svg
+++ b/__tests__/integration/snapshots/LayoutFlexDirectionRow.svg
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,0)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,20,0)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -481,7 +481,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,30,0)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -490,7 +490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,40,0)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
@@ -499,7 +499,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,50,0)">
             <path
               id="g-svg-10"
               fill="rgba(255,165,0,1)"
@@ -508,7 +508,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,60,0)">
             <path
               id="g-svg-11"
               fill="rgba(128,0,128,1)"
@@ -517,7 +517,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,70,0)">
             <path
               id="g-svg-12"
               fill="rgba(0,255,255,1)"
@@ -526,7 +526,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,80,0)">
             <path
               id="g-svg-13"
               fill="rgba(255,0,255,1)"
@@ -535,7 +535,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,0)">
             <path
               id="g-svg-14"
               fill="rgba(165,42,42,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexJustifyContentCenter.svg b/__tests__/integration/snapshots/LayoutFlexJustifyContentCenter.svg
index e1cf2b40b..70455bc3e 100644
--- a/__tests__/integration/snapshots/LayoutFlexJustifyContentCenter.svg
+++ b/__tests__/integration/snapshots/LayoutFlexJustifyContentCenter.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,25,0)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,35,0)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,0)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -481,7 +481,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,55,0)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -490,7 +490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,65,0)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexEnd.svg b/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexEnd.svg
index e1cf2b40b..3cda064b0 100644
--- a/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexEnd.svg
+++ b/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexEnd.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,50,0)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,60,0)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,70,0)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -481,7 +481,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,80,0)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -490,7 +490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,0)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexStart.svg b/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexStart.svg
index e1cf2b40b..c9d1b5587 100644
--- a/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexStart.svg
+++ b/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexStart.svg
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,0)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,20,0)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -481,7 +481,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,30,0)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -490,7 +490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,40,0)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexManipulateChildren.svg b/__tests__/integration/snapshots/LayoutFlexManipulateChildren.svg
index 4d468a869..58d37bc27 100644
--- a/__tests__/integration/snapshots/LayoutFlexManipulateChildren.svg
+++ b/__tests__/integration/snapshots/LayoutFlexManipulateChildren.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
@@ -463,7 +463,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,80)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -472,7 +472,7 @@
               height="20"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,30,85)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexNest.svg b/__tests__/integration/snapshots/LayoutFlexNest.svg
index 7083b4583..b7c810b8d 100644
--- a/__tests__/integration/snapshots/LayoutFlexNest.svg
+++ b/__tests__/integration/snapshots/LayoutFlexNest.svg
@@ -455,7 +455,7 @@
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
           <g id="g-svg-8" fill="none" width="40" height="40">
-            <g>
+            <g transform="matrix(1,0,0,1,15,20)">
               <path
                 id="g-svg-9"
                 fill="rgba(255,0,0,1)"
@@ -464,7 +464,7 @@
                 height="10"
               />
             </g>
-            <g>
+            <g transform="matrix(1,0,0,1,25,20)">
               <path
                 id="g-svg-10"
                 fill="rgba(0,128,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionBottom.svg b/__tests__/integration/snapshots/LayoutFlexPositionBottom.svg
index 7c3108087..77ce27e9c 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionBottom.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionBottom.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,45,90)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionBottomLeft.svg b/__tests__/integration/snapshots/LayoutFlexPositionBottomLeft.svg
index 7c3108087..da497954d 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionBottomLeft.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionBottomLeft.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionBottomRight.svg b/__tests__/integration/snapshots/LayoutFlexPositionBottomRight.svg
index 7c3108087..95d17c311 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionBottomRight.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionBottomRight.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,90,90)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionCenter.svg b/__tests__/integration/snapshots/LayoutFlexPositionCenter.svg
index 7c3108087..9e50474c0 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionCenter.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionCenter.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,45,45)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionLeft.svg b/__tests__/integration/snapshots/LayoutFlexPositionLeft.svg
index 7c3108087..c77c37aef 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionLeft.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionLeft.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,0,45)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionRight.svg b/__tests__/integration/snapshots/LayoutFlexPositionRight.svg
index 7c3108087..d85c6a92b 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionRight.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionRight.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,90,45)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionTop.svg b/__tests__/integration/snapshots/LayoutFlexPositionTop.svg
index 7c3108087..d3cb64e56 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionTop.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionTop.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,45,0)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionTopRight.svg b/__tests__/integration/snapshots/LayoutFlexPositionTopRight.svg
index 7c3108087..cf264e3a8 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionTopRight.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionTopRight.svg
@@ -454,7 +454,7 @@
           <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,90,0)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexUpdateLayout.svg b/__tests__/integration/snapshots/LayoutFlexUpdateLayout.svg
index 21cc4032f..6dbda29e5 100644
--- a/__tests__/integration/snapshots/LayoutFlexUpdateLayout.svg
+++ b/__tests__/integration/snapshots/LayoutFlexUpdateLayout.svg
@@ -2350,7 +2350,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,10)">
             <path
               id="g-svg-8"
               fill="rgba(0,128,0,1)"
@@ -2359,7 +2359,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,20)">
             <path
               id="g-svg-9"
               fill="rgba(0,0,255,1)"
@@ -2408,8 +2408,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-11" fill="none" x="100" y="0" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-11"
+          fill="none"
+          x="100"
+          y="0"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,100,0)"
+        >
+          <g transform="matrix(1,0,0,1,45,0)">
             <path
               id="g-svg-13"
               fill="rgba(255,0,0,1)"
@@ -2418,7 +2426,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,10)">
             <path
               id="g-svg-14"
               fill="rgba(0,128,0,1)"
@@ -2427,7 +2435,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,20)">
             <path
               id="g-svg-15"
               fill="rgba(0,0,255,1)"
@@ -2476,8 +2484,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-17" fill="none" x="200" y="0" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-17"
+          fill="none"
+          x="200"
+          y="0"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,200,0)"
+        >
+          <g transform="matrix(1,0,0,1,90,0)">
             <path
               id="g-svg-19"
               fill="rgba(255,0,0,1)"
@@ -2486,7 +2502,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,10)">
             <path
               id="g-svg-20"
               fill="rgba(0,128,0,1)"
@@ -2495,7 +2511,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,20)">
             <path
               id="g-svg-21"
               fill="rgba(0,0,255,1)"
@@ -2544,8 +2560,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-23" fill="none" x="300" y="0" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-23"
+          fill="none"
+          x="300"
+          y="0"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,300,0)"
+        >
+          <g transform="matrix(1,0,0,1,0,35)">
             <path
               id="g-svg-25"
               fill="rgba(255,0,0,1)"
@@ -2554,7 +2578,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,45)">
             <path
               id="g-svg-26"
               fill="rgba(0,128,0,1)"
@@ -2563,7 +2587,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,55)">
             <path
               id="g-svg-27"
               fill="rgba(0,0,255,1)"
@@ -2612,8 +2636,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-29" fill="none" x="400" y="0" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-29"
+          fill="none"
+          x="400"
+          y="0"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,400,0)"
+        >
+          <g transform="matrix(1,0,0,1,45,35)">
             <path
               id="g-svg-31"
               fill="rgba(255,0,0,1)"
@@ -2622,7 +2654,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,45)">
             <path
               id="g-svg-32"
               fill="rgba(0,128,0,1)"
@@ -2631,7 +2663,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,55)">
             <path
               id="g-svg-33"
               fill="rgba(0,0,255,1)"
@@ -2680,8 +2712,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-35" fill="none" x="500" y="0" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-35"
+          fill="none"
+          x="500"
+          y="0"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,500,0)"
+        >
+          <g transform="matrix(1,0,0,1,90,35)">
             <path
               id="g-svg-37"
               fill="rgba(255,0,0,1)"
@@ -2690,7 +2730,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,45)">
             <path
               id="g-svg-38"
               fill="rgba(0,128,0,1)"
@@ -2699,7 +2739,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,55)">
             <path
               id="g-svg-39"
               fill="rgba(0,0,255,1)"
@@ -2748,8 +2788,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-41" fill="none" x="0" y="100" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-41"
+          fill="none"
+          x="0"
+          y="100"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,0,100)"
+        >
+          <g transform="matrix(1,0,0,1,0,70)">
             <path
               id="g-svg-43"
               fill="rgba(255,0,0,1)"
@@ -2758,7 +2806,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,80)">
             <path
               id="g-svg-44"
               fill="rgba(0,128,0,1)"
@@ -2767,7 +2815,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-45"
               fill="rgba(0,0,255,1)"
@@ -2816,8 +2864,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-47" fill="none" x="100" y="100" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-47"
+          fill="none"
+          x="100"
+          y="100"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,100,100)"
+        >
+          <g transform="matrix(1,0,0,1,45,70)">
             <path
               id="g-svg-49"
               fill="rgba(255,0,0,1)"
@@ -2826,7 +2882,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,80)">
             <path
               id="g-svg-50"
               fill="rgba(0,128,0,1)"
@@ -2835,7 +2891,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,90)">
             <path
               id="g-svg-51"
               fill="rgba(0,0,255,1)"
@@ -2884,8 +2940,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-53" fill="none" x="200" y="100" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-53"
+          fill="none"
+          x="200"
+          y="100"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,200,100)"
+        >
+          <g transform="matrix(1,0,0,1,90,70)">
             <path
               id="g-svg-55"
               fill="rgba(255,0,0,1)"
@@ -2894,7 +2958,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,80)">
             <path
               id="g-svg-56"
               fill="rgba(0,128,0,1)"
@@ -2903,7 +2967,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,90)">
             <path
               id="g-svg-57"
               fill="rgba(0,0,255,1)"
@@ -2952,7 +3016,15 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-59" fill="none" x="300" y="100" width="100" height="100">
+        <g
+          id="g-svg-59"
+          fill="none"
+          x="300"
+          y="100"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,300,100)"
+        >
           <g>
             <path
               id="g-svg-61"
@@ -2962,7 +3034,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,0)">
             <path
               id="g-svg-62"
               fill="rgba(0,128,0,1)"
@@ -2971,7 +3043,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,20,0)">
             <path
               id="g-svg-63"
               fill="rgba(0,0,255,1)"
@@ -3020,8 +3092,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-65" fill="none" x="400" y="100" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-65"
+          fill="none"
+          x="400"
+          y="100"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,400,100)"
+        >
+          <g transform="matrix(1,0,0,1,0,45)">
             <path
               id="g-svg-67"
               fill="rgba(255,0,0,1)"
@@ -3030,7 +3110,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,45)">
             <path
               id="g-svg-68"
               fill="rgba(0,128,0,1)"
@@ -3039,7 +3119,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,20,45)">
             <path
               id="g-svg-69"
               fill="rgba(0,0,255,1)"
@@ -3088,8 +3168,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-71" fill="none" x="500" y="100" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-71"
+          fill="none"
+          x="500"
+          y="100"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,500,100)"
+        >
+          <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-73"
               fill="rgba(255,0,0,1)"
@@ -3098,7 +3186,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,10,90)">
             <path
               id="g-svg-74"
               fill="rgba(0,128,0,1)"
@@ -3107,7 +3195,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,20,90)">
             <path
               id="g-svg-75"
               fill="rgba(0,0,255,1)"
@@ -3156,8 +3244,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-77" fill="none" x="0" y="200" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-77"
+          fill="none"
+          x="0"
+          y="200"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,0,200)"
+        >
+          <g transform="matrix(1,0,0,1,35,0)">
             <path
               id="g-svg-79"
               fill="rgba(255,0,0,1)"
@@ -3166,7 +3262,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,0)">
             <path
               id="g-svg-80"
               fill="rgba(0,128,0,1)"
@@ -3175,7 +3271,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,55,0)">
             <path
               id="g-svg-81"
               fill="rgba(0,0,255,1)"
@@ -3224,8 +3320,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-83" fill="none" x="100" y="200" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-83"
+          fill="none"
+          x="100"
+          y="200"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,100,200)"
+        >
+          <g transform="matrix(1,0,0,1,35,45)">
             <path
               id="g-svg-85"
               fill="rgba(255,0,0,1)"
@@ -3234,7 +3338,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,45)">
             <path
               id="g-svg-86"
               fill="rgba(0,128,0,1)"
@@ -3243,7 +3347,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,55,45)">
             <path
               id="g-svg-87"
               fill="rgba(0,0,255,1)"
@@ -3292,8 +3396,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-89" fill="none" x="200" y="200" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-89"
+          fill="none"
+          x="200"
+          y="200"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,200,200)"
+        >
+          <g transform="matrix(1,0,0,1,35,90)">
             <path
               id="g-svg-91"
               fill="rgba(255,0,0,1)"
@@ -3302,7 +3414,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,90)">
             <path
               id="g-svg-92"
               fill="rgba(0,128,0,1)"
@@ -3311,7 +3423,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,55,90)">
             <path
               id="g-svg-93"
               fill="rgba(0,0,255,1)"
@@ -3360,8 +3472,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-95" fill="none" x="300" y="200" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-95"
+          fill="none"
+          x="300"
+          y="200"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,300,200)"
+        >
+          <g transform="matrix(1,0,0,1,70,0)">
             <path
               id="g-svg-97"
               fill="rgba(255,0,0,1)"
@@ -3370,7 +3490,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,80,0)">
             <path
               id="g-svg-98"
               fill="rgba(0,128,0,1)"
@@ -3379,7 +3499,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,0)">
             <path
               id="g-svg-99"
               fill="rgba(0,0,255,1)"
@@ -3428,8 +3548,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-101" fill="none" x="400" y="200" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-101"
+          fill="none"
+          x="400"
+          y="200"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,400,200)"
+        >
+          <g transform="matrix(1,0,0,1,70,45)">
             <path
               id="g-svg-103"
               fill="rgba(255,0,0,1)"
@@ -3438,7 +3566,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,80,45)">
             <path
               id="g-svg-104"
               fill="rgba(0,128,0,1)"
@@ -3447,7 +3575,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,45)">
             <path
               id="g-svg-105"
               fill="rgba(0,0,255,1)"
@@ -3496,8 +3624,16 @@
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-107" fill="none" x="500" y="200" width="100" height="100">
-          <g>
+        <g
+          id="g-svg-107"
+          fill="none"
+          x="500"
+          y="200"
+          width="100"
+          height="100"
+          transform="matrix(1,0,0,1,500,200)"
+        >
+          <g transform="matrix(1,0,0,1,70,90)">
             <path
               id="g-svg-109"
               fill="rgba(255,0,0,1)"
@@ -3506,7 +3642,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,80,90)">
             <path
               id="g-svg-110"
               fill="rgba(0,128,0,1)"
@@ -3515,7 +3651,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,90,90)">
             <path
               id="g-svg-111"
               fill="rgba(0,0,255,1)"
diff --git a/__tests__/integration/snapshots/LayoutUpdateAttr.svg b/__tests__/integration/snapshots/LayoutUpdateAttr.svg
index e4f4f948d..cb03c285e 100644
--- a/__tests__/integration/snapshots/LayoutUpdateAttr.svg
+++ b/__tests__/integration/snapshots/LayoutUpdateAttr.svg
@@ -829,7 +829,7 @@
           <g id="g-svg-80" fill="none" class="axis-title-group" />
         </g>
         <g id="g-svg-4" fill="none" width="100" height="100">
-          <g>
+          <g transform="matrix(1,0,0,1,25,45)">
             <path
               id="g-svg-5"
               fill="rgba(255,0,0,1)"
@@ -838,7 +838,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,35,45)">
             <path
               id="g-svg-6"
               fill="rgba(0,128,0,1)"
@@ -847,7 +847,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,45,45)">
             <path
               id="g-svg-7"
               fill="rgba(0,0,255,1)"
@@ -856,7 +856,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,55,45)">
             <path
               id="g-svg-8"
               fill="rgba(255,255,0,1)"
@@ -865,7 +865,7 @@
               height="10"
             />
           </g>
-          <g>
+          <g transform="matrix(1,0,0,1,65,45)">
             <path
               id="g-svg-9"
               fill="rgba(255,192,203,1)"
diff --git a/__tests__/integration/snapshots/RibbonDemo.svg b/__tests__/integration/snapshots/RibbonDemo.svg
index afd71731e..643944141 100644
--- a/__tests__/integration/snapshots/RibbonDemo.svg
+++ b/__tests__/integration/snapshots/RibbonDemo.svg
@@ -6,34 +6,6 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <linearGradient
-      gradientUnits="userSpaceOnUse"
-      id="g-pattern-0"
-      x1="0"
-      y1="15"
-      x2="400"
-      y2="15"
-    >
-      <stop offset="0" stop-color="rgba(208,227,250,1)" />
-      <stop offset="0.1111111111111111" stop-color="rgba(208,227,250,1)" />
-      <stop offset="0.1111111111111111" stop-color="rgba(172,199,246,1)" />
-      <stop offset="0.2222222222222222" stop-color="rgba(172,199,246,1)" />
-      <stop offset="0.2222222222222222" stop-color="rgba(141,170,242,1)" />
-      <stop offset="0.33333333333333326" stop-color="rgba(141,170,242,1)" />
-      <stop offset="0.33333333333333326" stop-color="rgba(109,142,234,1)" />
-      <stop offset="0.4444444444444444" stop-color="rgba(109,142,234,1)" />
-      <stop offset="0.4444444444444444" stop-color="rgba(77,115,205,1)" />
-      <stop offset="0.5555555555555556" stop-color="rgba(77,115,205,1)" />
-      <stop offset="0.5555555555555556" stop-color="rgba(50,91,177,1)" />
-      <stop offset="0.6666666666666665" stop-color="rgba(50,91,177,1)" />
-      <stop offset="0.6666666666666665" stop-color="rgba(90,62,117,1)" />
-      <stop offset="0.7777777777777779" stop-color="rgba(90,62,117,1)" />
-      <stop offset="0.7777777777777779" stop-color="rgba(140,60,121,1)" />
-      <stop offset="0.8888888888888888" stop-color="rgba(140,60,121,1)" />
-      <stop offset="0.8888888888888888" stop-color="rgba(226,52,85,1)" />
-      <stop offset="1" stop-color="rgba(226,52,85,1)" />
-      <stop offset="1" stop-color="rgba(231,101,91,1)" />
-    </linearGradient>
     <clipPath transform="matrix(1,0,0,1,-350,-350)" id="clip-path-16-15">
       <use href="#g-svg-16" transform="matrix(1,0,0,1,350,350)" />
     </clipPath>
@@ -97,6 +69,34 @@
       <stop offset="1" stop-color="rgba(231,101,91,1)" />
       <stop offset="1" stop-color="rgba(208,227,250,1)" />
     </linearGradient>
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="g-pattern-0"
+      x1="0"
+      y1="15"
+      x2="400"
+      y2="15"
+    >
+      <stop offset="0" stop-color="rgba(208,227,250,1)" />
+      <stop offset="0.1111111111111111" stop-color="rgba(208,227,250,1)" />
+      <stop offset="0.1111111111111111" stop-color="rgba(172,199,246,1)" />
+      <stop offset="0.2222222222222222" stop-color="rgba(172,199,246,1)" />
+      <stop offset="0.2222222222222222" stop-color="rgba(141,170,242,1)" />
+      <stop offset="0.33333333333333326" stop-color="rgba(141,170,242,1)" />
+      <stop offset="0.33333333333333326" stop-color="rgba(109,142,234,1)" />
+      <stop offset="0.4444444444444444" stop-color="rgba(109,142,234,1)" />
+      <stop offset="0.4444444444444444" stop-color="rgba(77,115,205,1)" />
+      <stop offset="0.5555555555555556" stop-color="rgba(77,115,205,1)" />
+      <stop offset="0.5555555555555556" stop-color="rgba(50,91,177,1)" />
+      <stop offset="0.6666666666666665" stop-color="rgba(50,91,177,1)" />
+      <stop offset="0.6666666666666665" stop-color="rgba(90,62,117,1)" />
+      <stop offset="0.7777777777777779" stop-color="rgba(90,62,117,1)" />
+      <stop offset="0.7777777777777779" stop-color="rgba(140,60,121,1)" />
+      <stop offset="0.8888888888888888" stop-color="rgba(140,60,121,1)" />
+      <stop offset="0.8888888888888888" stop-color="rgba(226,52,85,1)" />
+      <stop offset="1" stop-color="rgba(226,52,85,1)" />
+      <stop offset="1" stop-color="rgba(231,101,91,1)" />
+    </linearGradient>
     <clipPath transform="matrix(1,0,0,1,-100,-100)" id="clip-path-5-4">
       <use href="#g-svg-5" transform="matrix(1,0,0,1,100,100)" />
     </clipPath>
diff --git a/package.json b/package.json
index 5f5924361..984511628 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/component",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "Visualization components for AntV, based on G.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -44,16 +44,16 @@
     "component"
   ],
   "dependencies": {
-    "@antv/g": "^6.0.5",
+    "@antv/g": "^6.1.1",
     "@antv/scale": "^0.4.3",
     "@antv/util": "^3.3.5",
     "svg-path-parser": "^1.1.0"
   },
   "devDependencies": {
-    "@antv/g-canvas": "^2.0.3",
-    "@antv/g-plugin-control": "^2.0.0",
-    "@antv/g-svg": "^2.0.3",
-    "@antv/g-webgl": "^2.0.3",
+    "@antv/g-canvas": "^2.0.17",
+    "@antv/g-plugin-control": "^2.0.12",
+    "@antv/g-svg": "^2.0.14",
+    "@antv/g-webgl": "^2.0.21",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
diff --git a/src/ui/poptip/constant.ts b/src/ui/poptip/constant.ts
index f2e689d27..0b3528367 100644
--- a/src/ui/poptip/constant.ts
+++ b/src/ui/poptip/constant.ts
@@ -73,7 +73,7 @@ export const POPTIP_STYLE = {
   [`.${CLASS_NAME.ARROW}`]: {
     width: '4px',
     height: '4px',
-    transform: 'rotate(45deg)',
+    transform: [['rotate', 45]],
     'background-color': 'rgba(0, 0, 0)',
     position: 'absolute',
     'z-index': -1,
diff --git a/src/ui/slider/index.ts b/src/ui/slider/index.ts
index 439970bcf..1bf0f68d6 100644
--- a/src/ui/slider/index.ts
+++ b/src/ui/slider/index.ts
@@ -389,8 +389,9 @@ export class Slider extends Component<SliderStyleProps> {
   private inferTextStyle(handleType: HandleType): Record<string, any> {
     const { orientation } = this.attributes;
     if (orientation === 'horizontal') return {};
-    if (handleType === 'start') return { transformOrigin: 'left center', transform: 'rotate(90)', textAlign: 'start' };
-    if (handleType === 'end') return { transformOrigin: 'right center', transform: 'rotate(90)', textAlign: 'end' };
+    if (handleType === 'start')
+      return { transformOrigin: 'left center', transform: [['rotate', 90]], textAlign: 'start' };
+    if (handleType === 'end') return { transformOrigin: 'right center', transform: [['rotate', 90]], textAlign: 'end' };
     return {};
   }