diff --git a/package.json b/package.json
index 861a4e5db4..7c55d3d63c 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,8 @@
     ]
   },
   "devDependencies": {
-    "@antv/g-canvas": "^2.0.12",
-    "@antv/g-plugin-rough-canvas-renderer": "^2.0.13",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g-plugin-rough-canvas-renderer": "^2.0.18",
     "@babel/core": "^7.25.2",
     "@babel/plugin-transform-typescript": "^7.25.2",
     "@changesets/cli": "^2.27.8",
diff --git a/packages/cli/template-extension/package.json b/packages/cli/template-extension/package.json
index 79ffb06c45..d1139b0630 100644
--- a/packages/cli/template-extension/package.json
+++ b/packages/cli/template-extension/package.json
@@ -35,9 +35,9 @@
     "@antv/g6": "^5.0.0"
   },
   "devDependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.4",
-    "@antv/g-svg": "^2.0.5",
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g-svg": "^2.0.15",
     "@commitlint/config-conventional": "^19.2.2",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -71,7 +71,7 @@
     "xmlserializer": "^0.6.1"
   },
   "peerDependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.4"
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18"
   }
 }
diff --git a/packages/g6-extension-3d/package.json b/packages/g6-extension-3d/package.json
index 7ba5a81161..9e785dfc37 100644
--- a/packages/g6-extension-3d/package.json
+++ b/packages/g6-extension-3d/package.json
@@ -34,22 +34,22 @@
   },
   "dependencies": {
     "@antv/g-device-api": "^1.6.12",
-    "@antv/g-plugin-3d": "^2.0.14",
-    "@antv/g-plugin-device-renderer": "^2.0.14",
-    "@antv/g-plugin-dragndrop": "^2.0.9",
-    "@antv/g-webgl": "^2.0.16",
+    "@antv/g-plugin-3d": "^2.0.20",
+    "@antv/g-plugin-device-renderer": "^2.1.2",
+    "@antv/g-plugin-dragndrop": "^2.0.13",
+    "@antv/g-webgl": "^2.0.22",
     "@antv/layout": "^1.2.14-beta.7",
     "@antv/util": "^3.3.8"
   },
   "devDependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.12",
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18",
     "@antv/g6": "workspace:*"
   },
   "peerDependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.4",
-    "@antv/g6": "^5.0.26"
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g6": "^workspace:*"
   },
   "publishConfig": {
     "access": "public",
diff --git a/packages/g6-extension-react/package.json b/packages/g6-extension-react/package.json
index d2bb49fe0a..32dcd86ef1 100644
--- a/packages/g6-extension-react/package.json
+++ b/packages/g6-extension-react/package.json
@@ -35,8 +35,8 @@
     "type-check": "tsc --noEmit -p tsconfig.test.json"
   },
   "dependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-svg": "^2.0.11",
+    "@antv/g": "^6.1.2",
+    "@antv/g-svg": "^2.0.15",
     "@antv/react-g": "^2.0.14"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "styled-components": "^6.1.13"
   },
   "peerDependencies": {
-    "@antv/g6": "^5.0.26",
+    "@antv/g6": "^workspace:*",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
diff --git a/packages/g6/__tests__/bugs/element-port-rotate.spec.ts b/packages/g6/__tests__/bugs/element-port-rotate.spec.ts
index bcfd15186c..24191efe2d 100644
--- a/packages/g6/__tests__/bugs/element-port-rotate.spec.ts
+++ b/packages/g6/__tests__/bugs/element-port-rotate.spec.ts
@@ -17,7 +17,7 @@ describe('element port rotate', () => {
             { key: 'port-2', placement: 'left' },
             { key: 'port-3', placement: [0, 0.85] },
           ],
-          transform: 'rotate(45deg)',
+          transform: [['rotate', 45]],
         },
       },
     });
diff --git a/packages/g6/__tests__/demos/case-fund-flow.ts b/packages/g6/__tests__/demos/case-fund-flow.ts
index 8746b88f40..9509cb93f6 100644
--- a/packages/g6/__tests__/demos/case-fund-flow.ts
+++ b/packages/g6/__tests__/demos/case-fund-flow.ts
@@ -107,7 +107,7 @@ export const caseFundFlow: TestCase = async (context) => {
         fontFamily: 'iconfont',
         fontSize: 16,
         text: '\ue62d',
-        transform: this.data.variableUp ? '' : 'rotate(180deg)',
+        transform: this.data.variableUp ? [] : [['rotate', 180]],
       };
     }
 
diff --git a/packages/g6/__tests__/demos/case-mindmap.ts b/packages/g6/__tests__/demos/case-mindmap.ts
index 805d7ad287..eb7437d3a8 100644
--- a/packages/g6/__tests__/demos/case-mindmap.ts
+++ b/packages/g6/__tests__/demos/case-mindmap.ts
@@ -124,7 +124,7 @@ export const caseMindmap: TestCase = async (context) => {
         fontSize: 8,
         text: '\ue6e4',
         textAlign: 'center',
-        transform: direction === 'left' ? 'rotate(90deg)' : 'rotate(-90deg)',
+        transform: direction === 'left' ? [['rotate', 90]] : [['rotate', -90]],
         visibility: showIcon ? 'visible' : 'hidden',
         x: direction === 'left' ? -6 : width + 6,
         y: height,
diff --git a/packages/g6/__tests__/demos/case-org-chart.ts b/packages/g6/__tests__/demos/case-org-chart.ts
index 8eb7eed1dd..4d1cf79da2 100644
--- a/packages/g6/__tests__/demos/case-org-chart.ts
+++ b/packages/g6/__tests__/demos/case-org-chart.ts
@@ -37,14 +37,14 @@ export const caseOrgChart: TestCase = async (context) => {
               fontSize: 20,
               fontWeight: 600,
               textAlign: 'center',
-              transform: 'translate(0,0)',
+              transform: [['translate', 0, 0]],
             }
           : {
               fill: '#2078B4',
               fontSize: 14,
               fontWeight: 400,
               textAlign: 'left',
-              transform: 'translate(-65, -15)',
+              transform: [['translate', -65, -15]],
             };
       return { text, ...labelStyle } as LabelStyleProps;
     }
@@ -65,7 +65,7 @@ export const caseOrgChart: TestCase = async (context) => {
         textTransform: 'uppercase',
         fill: '#343f4a',
         textAlign: 'left',
-        transform: 'translate(-65, 0)',
+        transform: [['translate', -65, 0]],
       };
     }
 
@@ -80,7 +80,7 @@ export const caseOrgChart: TestCase = async (context) => {
         text: this.data.status,
         fontSize: 8,
         textAlign: 'left',
-        transform: 'translate(40, -16)',
+        transform: [['translate', 40, -16]],
         padding: [0, 4],
         fill: '#fff',
         backgroundFill: statusColors[this.data.status as string],
@@ -99,7 +99,7 @@ export const caseOrgChart: TestCase = async (context) => {
         fontSize: 8,
         fontWeight: 300,
         textAlign: 'left',
-        transform: 'translate(-65, 20)',
+        transform: [['translate', -65, 20]],
       };
     }
 
diff --git a/packages/g6/__tests__/demos/element-edge-custom-arrow.ts b/packages/g6/__tests__/demos/element-edge-custom-arrow.ts
index 563f74c6d9..68a42ea6c2 100644
--- a/packages/g6/__tests__/demos/element-edge-custom-arrow.ts
+++ b/packages/g6/__tests__/demos/element-edge-custom-arrow.ts
@@ -29,7 +29,7 @@ export const elementEdgeCustomArrow: TestCase = async (context) => {
         style: {
           endArrowSrc: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
           endArrowSize: 28,
-          endArrowTransform: 'rotate(90deg)',
+          endArrowTransform: [['rotate', 90]],
           endArrowX: -14,
           endArrowY: -14,
         },
diff --git a/packages/g6/__tests__/demos/layout-compact-box-top-to-bottom.ts b/packages/g6/__tests__/demos/layout-compact-box-top-to-bottom.ts
index 8a403501bb..db193e7204 100644
--- a/packages/g6/__tests__/demos/layout-compact-box-top-to-bottom.ts
+++ b/packages/g6/__tests__/demos/layout-compact-box-top-to-bottom.ts
@@ -12,7 +12,7 @@ export const layoutCompactBoxLeftAlign: TestCase = async (context) => {
         labelText: (data) => data.id,
         labelPlacement: 'right',
         labelMaxWidth: 200,
-        transform: 'rotate(90deg)',
+        transform: [['rotate', 90]],
         size: 26,
         fill: '#EFF4FF',
         lineWidth: 1,
diff --git a/packages/g6/__tests__/demos/layout-dendrogram-tb.ts b/packages/g6/__tests__/demos/layout-dendrogram-tb.ts
index aebaf3fa19..bf4e925ffc 100644
--- a/packages/g6/__tests__/demos/layout-dendrogram-tb.ts
+++ b/packages/g6/__tests__/demos/layout-dendrogram-tb.ts
@@ -15,7 +15,7 @@ export const layoutDendrogramTb: TestCase = async (context) => {
           labelText: model.id,
           labelTextAlign: 'start',
           labelTextBaseline: hasChildren ? 'middle' : 'bottom',
-          transform: hasChildren ? '' : 'rotate(90)',
+          transform: hasChildren ? [] : [['rotate', 90]],
           ports: [{ placement: 'bottom' }, { placement: 'top' }],
         };
       },
diff --git a/packages/g6/__tests__/unit/utils/edge.spec.ts b/packages/g6/__tests__/unit/utils/edge.spec.ts
index 4d8b546c09..161f9c04f2 100644
--- a/packages/g6/__tests__/unit/utils/edge.spec.ts
+++ b/packages/g6/__tests__/unit/utils/edge.spec.ts
@@ -52,30 +52,35 @@ describe('edge', () => {
 
       const labelPlacement = getLabelPositionStyle(line, 'center', false, 0, 0);
       expect(labelPlacement.textAlign).toEqual('center');
-      expect(labelPlacement.transform).toEqual('translate(50, 100)');
+      expect(labelPlacement.transform).toEqual([['translate', 50, 100]]);
 
       const labelPosition2 = getLabelPositionStyle(line, 'center', true, 5, 5);
       expect(labelPosition2.textAlign).toEqual('center');
-      expect(labelPosition2.transform).toEqual('translate(55, 105)');
+      expect(labelPosition2.transform).toEqual([['translate', 55, 105]]);
 
       const labelPosition3 = getLabelPositionStyle(line, 'start', true, 5, 5);
       expect(labelPosition3.textAlign).toEqual('left');
-      expect(labelPosition3.transform).toEqual('translate(5, 105)');
+      expect(labelPosition3.transform).toEqual([['translate', 5, 105]]);
 
       const labelPosition4 = getLabelPositionStyle(line, 'end', true, 5, 5);
       expect(labelPosition4.textAlign).toEqual('right');
-      expect(labelPosition4.transform).toEqual('translate(104, 105)');
+      expect(labelPosition4.transform).toEqual([['translate', 104, 105]]);
 
       const labelPosition5 = getLabelPositionStyle(line, 0.5, true, 5, 5);
       expect(labelPosition5.textAlign).toEqual('center');
-      expect(labelPosition5.transform).toEqual('translate(55, 105)');
+      expect(labelPosition5.transform).toEqual([['translate', 55, 105]]);
 
       //  with rotation angle below Math.PI
       const labelPosition6 = getLabelPositionStyle(line1, 'center', true, 5, 5);
       expect(labelPosition6.textAlign).toEqual('center');
-      expect(labelPosition6.transform).toEqual(
-        `translate(${50 + 5 * Math.cos(Math.PI / 4) - 5 * Math.sin(Math.PI / 4)}, ${150 + 5 * Math.sin(Math.PI / 4) + 5 * Math.cos(Math.PI / 4)}) rotate(45deg)`,
-      );
+      expect(labelPosition6.transform).toEqual([
+        [
+          'translate',
+          50 + 5 * Math.cos(Math.PI / 4) - 5 * Math.sin(Math.PI / 4),
+          150 + 5 * Math.sin(Math.PI / 4) + 5 * Math.cos(Math.PI / 4),
+        ],
+        ['rotate', 45],
+      ]);
 
       const labelPosition7 = getLabelPositionStyle(line1, 'start', true, 5, 5);
       expect(labelPosition7.textAlign).toEqual('left');
@@ -86,9 +91,14 @@ describe('edge', () => {
       // with rotation angle over Math.PI
       const labelPosition9 = getLabelPositionStyle(line2, 'center', true, 5, 5);
       expect(labelPosition9.textAlign).toEqual('center');
-      expect(labelPosition9.transform).toEqual(
-        `translate(${50 + 5 * Math.cos(-Math.PI / 4) - 5 * Math.sin(-Math.PI / 4)}, ${150 + 5 * Math.sin(-Math.PI / 4) + 5 * Math.cos(-Math.PI / 4)}) rotate(-45deg)`,
-      );
+      expect(labelPosition9.transform).toEqual([
+        [
+          'translate',
+          50 + 5 * Math.cos(-Math.PI / 4) - 5 * Math.sin(-Math.PI / 4),
+          150 + 5 * Math.sin(-Math.PI / 4) + 5 * Math.cos(-Math.PI / 4),
+        ],
+        ['rotate', -45],
+      ]);
     });
   });
 
@@ -100,7 +110,7 @@ describe('edge', () => {
     };
     expect(getBadgePositionStyle(shapeMap, 'prefix', 'center', 10, 0)).toEqual({
       textAlign: 'center',
-      transform: 'translate(50, 0)',
+      transform: [['translate', 50, 0]],
     });
   });
 
diff --git a/packages/g6/__tests__/unit/utils/element.spec.ts b/packages/g6/__tests__/unit/utils/element.spec.ts
index d6e6f4e8ed..6526987e2f 100644
--- a/packages/g6/__tests__/unit/utils/element.spec.ts
+++ b/packages/g6/__tests__/unit/utils/element.spec.ts
@@ -171,45 +171,45 @@ describe('element', () => {
 
   it('getTextStyleByPlacement', () => {
     expect(getTextStyleByPlacement(bbox, 'left')).toEqual({
-      transform: 'translate(100, 150)',
+      transform: [['translate', 100, 150]],
       textAlign: 'right',
       textBaseline: 'middle',
     });
     expect(getTextStyleByPlacement(bbox, 'right')).toEqual({
-      transform: 'translate(200, 150)',
+      transform: [['translate', 200, 150]],
       textAlign: 'left',
       textBaseline: 'middle',
     });
     expect(getTextStyleByPlacement(bbox, 'top')).toEqual({
-      transform: 'translate(150, 100)',
+      transform: [['translate', 150, 100]],
       textAlign: 'center',
       textBaseline: 'bottom',
     });
     expect(getTextStyleByPlacement(bbox, 'bottom')).toEqual({
-      transform: 'translate(150, 200)',
+      transform: [['translate', 150, 200]],
       textAlign: 'center',
       textBaseline: 'top',
     });
 
     expect(getTextStyleByPlacement(bbox, 'left-top')).toEqual({
-      transform: 'translate(100, 100)',
+      transform: [['translate', 100, 100]],
       textAlign: 'right',
       textBaseline: 'bottom',
     });
     expect(getTextStyleByPlacement(bbox, 'right-bottom')).toEqual({
-      transform: 'translate(200, 200)',
+      transform: [['translate', 200, 200]],
       textAlign: 'left',
       textBaseline: 'top',
     });
 
     expect(getTextStyleByPlacement(bbox, 'center')).toEqual({
-      transform: 'translate(150, 150)',
+      transform: [['translate', 150, 150]],
       textAlign: 'center',
       textBaseline: 'middle',
     });
 
     expect(getTextStyleByPlacement(bbox)).toEqual({
-      transform: 'translate(150, 200)',
+      transform: [['translate', 150, 200]],
       textAlign: 'center',
       textBaseline: 'top',
     });
diff --git a/packages/g6/__tests__/unit/utils/polygon.spec.ts b/packages/g6/__tests__/unit/utils/polygon.spec.ts
index 393ce4f8b1..711f719aae 100644
--- a/packages/g6/__tests__/unit/utils/polygon.spec.ts
+++ b/packages/g6/__tests__/unit/utils/polygon.spec.ts
@@ -1,4 +1,5 @@
 import { getPolygonTextStyleByPlacement } from '@/src/utils/polygon';
+import type { TransformArray } from '@antv/g';
 import { AABB, Path } from '@antv/g';
 import type { PathArray } from '@antv/util';
 
@@ -15,29 +16,29 @@ describe('polygon', () => {
     expect(getPolygonTextStyleByPlacement(bounds, 'top', 0, 0, false, EMPTY_PATH, false)).toEqual({
       textAlign: 'center',
       textBaseline: 'bottom',
-      transform: 'translate(50, 0)',
+      transform: [['translate', 50, 0]],
     });
     expect(getPolygonTextStyleByPlacement(bounds, 'left', 0, 0, false, EMPTY_PATH, false)).toEqual({
       textAlign: 'right',
       textBaseline: 'middle',
-      transform: 'translate(0, 50)',
+      transform: [['translate', 0, 50]],
     });
     expect(getPolygonTextStyleByPlacement(bounds, 'right', 0, 0, false, EMPTY_PATH, false)).toEqual({
       textAlign: 'left',
       textBaseline: 'middle',
-      transform: 'translate(100, 50)',
+      transform: [['translate', 100, 50]],
     });
     expect(getPolygonTextStyleByPlacement(bounds, 'bottom', 0, 0, false, EMPTY_PATH, false)).toEqual({
       textAlign: 'center',
       textBaseline: 'top',
-      transform: 'translate(50, 100)',
+      transform: [['translate', 50, 100]],
     });
 
     // with offset
     expect(getPolygonTextStyleByPlacement(bounds, 'top', 10, 10, false, EMPTY_PATH, false)).toEqual({
       textAlign: 'center',
       textBaseline: 'bottom',
-      transform: 'translate(60, 10)',
+      transform: [['translate', 60, 10]],
     });
 
     // closeToHull and autoRotate
@@ -48,7 +49,7 @@ describe('polygon', () => {
     expect(getPolygonTextStyleByPlacement(bounds, 'top', 0, 0, true, circle, true)).toEqual({
       textAlign: 'center',
       textBaseline: 'bottom',
-      transform: 'translate(50, 0)',
+      transform: [['translate', 50, 0]],
     });
 
     const d: PathArray = [
@@ -62,21 +63,21 @@ describe('polygon', () => {
     const labelStyle1 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'top', 0, 0, true, d, true);
     expect(labelStyle1.textAlign).toBe('center');
     expect(labelStyle1.textBaseline).toBe('bottom');
-    expect(labelStyle1.transform).toContain('rotate');
+    expect((labelStyle1.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
 
     const labelStyle2 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'right', 0, 0, true, d, true);
     expect(labelStyle2.textAlign).toBe('center');
     expect(labelStyle2.textBaseline).toBe('top');
-    expect(labelStyle2.transform).toContain('rotate');
+    expect((labelStyle2.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
 
     const labelStyle3 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'bottom', 0, 0, true, d, true);
     expect(labelStyle3.textAlign).toBe('center');
     expect(labelStyle3.textBaseline).toBe('top');
-    expect(labelStyle3.transform).toContain('rotate');
+    expect((labelStyle3.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
 
     const labelStyle4 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'left', 0, 0, true, d, true);
     expect(labelStyle4.textAlign).toBe('center');
     expect(labelStyle4.textBaseline).toBe('top');
-    expect(labelStyle4.transform).toContain('rotate');
+    expect((labelStyle4.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
   });
 });
diff --git a/packages/g6/__tests__/unit/utils/style.spec.ts b/packages/g6/__tests__/unit/utils/style.spec.ts
index 2d04d2905d..cb7f8a0eb8 100644
--- a/packages/g6/__tests__/unit/utils/style.spec.ts
+++ b/packages/g6/__tests__/unit/utils/style.spec.ts
@@ -53,7 +53,7 @@ describe('style', () => {
       x: 100,
       y: 100,
       class: 'node',
-      transform: 'translate(100, 100)',
+      transform: [['translate', 100, 100]],
       zIndex: 100,
       fill: 'pink',
     };
diff --git a/packages/g6/package.json b/packages/g6/package.json
index ecced36d2a..cdb66edc8f 100644
--- a/packages/g6/package.json
+++ b/packages/g6/package.json
@@ -58,11 +58,11 @@
   },
   "dependencies": {
     "@antv/algorithm": "^0.1.26",
-    "@antv/component": "^2.0.4",
+    "@antv/component": "^2.1.0",
     "@antv/event-emitter": "^0.1.3",
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.12",
-    "@antv/g-plugin-dragndrop": "^2.0.9",
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g-plugin-dragndrop": "^2.0.13",
     "@antv/graphlib": "^2.0.3",
     "@antv/hierarchy": "^0.6.13",
     "@antv/layout": "^1.2.14-beta.8",
@@ -71,8 +71,8 @@
     "hull.js": "^1.0.6"
   },
   "devDependencies": {
-    "@antv/g-svg": "^2.0.11",
-    "@antv/g-webgl": "^2.0.16",
+    "@antv/g-svg": "^2.0.15",
+    "@antv/g-webgl": "^2.0.22",
     "@antv/layout-gpu": "^1.1.7",
     "@antv/layout-wasm": "^1.4.2",
     "@types/hull.js": "^1.0.4",
@@ -88,7 +88,7 @@
   "limit-size": [
     {
       "gzip": true,
-      "limit": "310 Kb",
+      "limit": "320 Kb",
       "path": "dist/g6.min.js"
     },
     {
diff --git a/packages/g6/src/animations/executor.ts b/packages/g6/src/animations/executor.ts
index e89731ef48..8d24b9922b 100644
--- a/packages/g6/src/animations/executor.ts
+++ b/packages/g6/src/animations/executor.ts
@@ -66,6 +66,7 @@ export const executor: AnimationExecutor = (element, keyframes, options) => {
       if (keyframes.some((keyframe) => Object.keys(keyframe).some((attr) => ['x', 'y', 'z'].includes(attr)))) {
         const { x = 0, y = 0, z = 0, transform = '' } = shape.attributes || {};
         keyframes.forEach((keyframe) => {
+          // @ts-expect-error ignore type error
           keyframe.transform = replaceTranslateInTransform(
             (keyframe.x as number) || (x as number),
             (keyframe.y as number) || (y as number),
diff --git a/packages/g6/src/elements/combos/base-combo.ts b/packages/g6/src/elements/combos/base-combo.ts
index 6652fe3f22..eb5b2de2c4 100644
--- a/packages/g6/src/elements/combos/base-combo.ts
+++ b/packages/g6/src/elements/combos/base-combo.ts
@@ -226,7 +226,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
     const { zIndex = this.getComboZIndex(attributes) } = attributes;
     const [x, y] = this.getComboPosition(attributes);
     // x/y will be used to calculate position later.
-    return { x, y, transform: `translate(${x}, ${y})`, zIndex };
+    return { x, y, transform: [['translate', x, y]], zIndex };
   }
 
   protected updateComboPosition(attributes: Required<S>) {
diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts
index bfd91bd038..76340222ad 100644
--- a/packages/g6/src/elements/nodes/base-node.ts
+++ b/packages/g6/src/elements/nodes/base-node.ts
@@ -323,7 +323,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
         portsShapeStyle[key] = false;
       } else {
         const [x, y] = this.getPortXY(attributes, option);
-        portsShapeStyle[key] = { transform: `translate(${x}, ${y})`, ...mergedStyle };
+        portsShapeStyle[key] = { transform: [['translate', x, y]], ...mergedStyle };
       }
     });
     return portsShapeStyle;
diff --git a/packages/g6/src/elements/shapes/base-shape.ts b/packages/g6/src/elements/shapes/base-shape.ts
index de7b3a7cab..42415772db 100644
--- a/packages/g6/src/elements/shapes/base-shape.ts
+++ b/packages/g6/src/elements/shapes/base-shape.ts
@@ -188,7 +188,7 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
       const { x: _x = 0, y: _y = 0, z: _z = 0 } = this.attributes as Record<string, any>;
       keyframes.forEach((keyframe) => {
         const { x = _x, y = _y, z = _z } = keyframe;
-        Object.assign(keyframe, { transform: replaceTranslateInTransform(+x, +y, +z) });
+        Object.assign(keyframe, { transform: z ? [['translate3d', x, y, z]] : [['translate', x, y]] });
       });
     }
 
diff --git a/packages/g6/src/preset.ts b/packages/g6/src/preset.ts
index 6e4fb57448..53abd014a9 100644
--- a/packages/g6/src/preset.ts
+++ b/packages/g6/src/preset.ts
@@ -1,5 +1,3 @@
-import { runtime } from '@antv/g';
 import { registerBuiltInExtensions } from './registry/build-in';
 
-runtime.enableCSSParsing = false;
 registerBuiltInExtensions();
diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts
index e35a646e5c..3f4b2c38b5 100644
--- a/packages/g6/src/runtime/element.ts
+++ b/packages/g6/src/runtime/element.ts
@@ -134,6 +134,9 @@ export class ElementController {
   private computeElementDefaultStyle(elementType: ElementType, context: StyleIterationContext) {
     const { options } = this.context;
     const defaultStyle = options[elementType]?.style || {};
+    if ('transform' in defaultStyle && Array.isArray(defaultStyle.transform)) {
+      defaultStyle.transform = [...defaultStyle.transform];
+    }
     this.defaultStyle[idOf(context.datum)] = computeElementCallbackStyle(defaultStyle as any, context);
   }
 
@@ -387,7 +390,6 @@ export class ElementController {
       const targetZIndex = this.getElementZIndex(context.target!);
       if (!style.zIndex || style.zIndex < targetZIndex) style.zIndex = targetZIndex + (style.zIndex ?? 0);
     }
-
     const element = this.container.appendChild(
       new Ctor({
         id,
diff --git a/packages/g6/src/transforms/place-radial-labels.ts b/packages/g6/src/transforms/place-radial-labels.ts
index f2c778fb1b..a598c5876b 100644
--- a/packages/g6/src/transforms/place-radial-labels.ts
+++ b/packages/g6/src/transforms/place-radial-labels.ts
@@ -1,3 +1,4 @@
+import type { TransformArray } from '@antv/g';
 import { rad2deg } from '@antv/g';
 import type { RuntimeContext } from '../runtime/types';
 import type { NodeData } from '../spec';
@@ -56,8 +57,10 @@ export class PlaceRadialLabels extends BaseTransform<PlaceRadialLabelsOptions> {
       const nodeHalfWidth = parseSize(graph.getElementRenderStyle(idOf(datum)).size)[0] / 2;
       const offset = (isLeaf ? 1 : -1) * (nodeHalfWidth + this.options.offset);
 
-      const translate = `translate(${offset * Math.cos(radian)},${offset * Math.sin(radian)})`;
-      const rotate = `rotate(${isLeft ? rad2deg(radian) + 180 : rad2deg(radian)}deg)`;
+      const labelTransform: TransformArray = [
+        ['translate', offset * Math.cos(radian), offset * Math.sin(radian)],
+        ['rotate', isLeft ? rad2deg(radian) + 180 : rad2deg(radian)],
+      ];
 
       model.updateNodeData([
         {
@@ -65,7 +68,7 @@ export class PlaceRadialLabels extends BaseTransform<PlaceRadialLabelsOptions> {
           style: {
             labelTextAlign: isLeft === isLeaf ? 'right' : 'left',
             labelTextBaseline: 'middle',
-            labelTransform: `${translate} ${rotate}`,
+            labelTransform,
           },
         },
       ]);
diff --git a/packages/g6/src/utils/edge.ts b/packages/g6/src/utils/edge.ts
index 31bdb63cd6..162142662b 100644
--- a/packages/g6/src/utils/edge.ts
+++ b/packages/g6/src/utils/edge.ts
@@ -1,4 +1,4 @@
-import type { AABB, DisplayObject } from '@antv/g';
+import type { AABB, DisplayObject, TransformArray } from '@antv/g';
 import type { PathArray } from '@antv/util';
 import { isEqual, isNumber } from '@antv/util';
 import type { EdgeData } from '../spec';
@@ -57,7 +57,7 @@ export function getLabelPositionStyle(
 
   if (isHorizontal(point, pointOffset) || !autoRotate) {
     const [x, y] = getXYByPlacement(key, ratio, offsetX, offsetY);
-    return { transform: `translate(${x}, ${y})`, textAlign };
+    return { transform: [['translate', x, y]], textAlign };
   }
 
   let angle = Math.atan2(pointOffset[1] - point[1], pointOffset[0] - point[0]);
@@ -70,7 +70,10 @@ export function getLabelPositionStyle(
   }
 
   const [x, y] = getXYByPlacement(key, ratio, offsetX, offsetY, angle);
-  const transform = `translate(${x}, ${y}) rotate(${(angle / Math.PI) * 180}deg)`;
+  const transform: TransformArray = [
+    ['translate', x, y],
+    ['rotate', (angle / Math.PI) * 180],
+  ];
 
   return {
     textAlign,
diff --git a/packages/g6/src/utils/element.ts b/packages/g6/src/utils/element.ts
index a1e729981b..5d9f93306e 100644
--- a/packages/g6/src/utils/element.ts
+++ b/packages/g6/src/utils/element.ts
@@ -301,7 +301,7 @@ export function getTextStyleByPlacement(
   }
 
   return {
-    transform: `translate(${x + offsetX}, ${y + offsetY})`,
+    transform: [['translate', x + offsetX, y + offsetY]],
     textBaseline,
     textAlign,
   };
diff --git a/packages/g6/src/utils/polygon.ts b/packages/g6/src/utils/polygon.ts
index 8bb012e4db..c98d4993c4 100644
--- a/packages/g6/src/utils/polygon.ts
+++ b/packages/g6/src/utils/polygon.ts
@@ -32,7 +32,7 @@ export function getPolygonTextStyleByPlacement(
   const style: Partial<TextStyleProps> = {
     textAlign: placement === 'left' ? 'right' : placement === 'right' ? 'left' : 'center',
     textBaseline: placement === 'top' ? 'bottom' : placement === 'bottom' ? 'top' : 'middle',
-    transform: `translate(${x + offsetX}, ${y + offsetY})`,
+    transform: [['translate', x + offsetX, y + offsetY]],
   };
   if (placement === 'center' || !closeToContour) return style;
 
@@ -51,10 +51,10 @@ export function getPolygonTextStyleByPlacement(
   const line = findNearestLine([x, y], lines);
   const intersection = findNearestPointOnLine([x, y], line);
   if (intersection && line) {
-    style.transform = `translate(${intersection[0] + offsetX}, ${intersection[1] + offsetY})`;
+    style.transform = [['translate', intersection[0] + offsetX, intersection[1] + offsetY]];
     if (autoRotate) {
       const angle = Math.atan((line[0][1] - line[1][1]) / (line[0][0] - line[1][0]));
-      style.transform += `rotate(${(angle / Math.PI) * 180}deg)`;
+      style.transform.push(['rotate', (angle / Math.PI) * 180]);
       style.textAlign = 'center';
       if (placement === 'right' || placement === 'left') {
         if (angle > 0) {
diff --git a/packages/g6/src/utils/transform.ts b/packages/g6/src/utils/transform.ts
index 1a5bd814dc..8a9b53749a 100644
--- a/packages/g6/src/utils/transform.ts
+++ b/packages/g6/src/utils/transform.ts
@@ -1,3 +1,5 @@
+import type { TransformArray } from '@antv/g';
+
 /**
  * <zh/> 从 transform 字符串中替换 translate 部分
  *
@@ -8,7 +10,30 @@
  * @param transform - <zh/> transform 字符串 | <en/> transform string
  * @returns <zh/> 替换后的 transform 字符串 | <en/> replaced transform string
  */
-export function replaceTranslateInTransform(x: number, y: number, z: number, transform?: string) {
+export function replaceTranslateInTransform(
+  x: number,
+  y: number,
+  z: number,
+  transform: string | TransformArray,
+): string | TransformArray {
+  if (Array.isArray(transform)) {
+    let hasTranslate = false;
+    const newTransform: TransformArray = transform.map((t) => {
+      if (t[0] === 'translate') {
+        hasTranslate = true;
+        return ['translate', x, y];
+      } else if (t[0] === 'translate3d') {
+        hasTranslate = true;
+        return ['translate3d', x, y, z];
+      }
+      return t;
+    });
+    if (!hasTranslate) {
+      newTransform.splice(0, 0, z === 0 ? ['translate', x, y] : ['translate3d', x, y, z]);
+    }
+    return newTransform;
+  }
+
   const removedTranslate = transform ? transform.replace(/translate(3d)?\([^)]*\)/g, '') : '';
   if (z === 0) {
     return `translate(${x}, ${y})${removedTranslate}`;
diff --git a/packages/site/examples/element/custom-edge/demo/custom-arrow.js b/packages/site/examples/element/custom-edge/demo/custom-arrow.js
index 69dab119f9..d2e3a65669 100644
--- a/packages/site/examples/element/custom-edge/demo/custom-arrow.js
+++ b/packages/site/examples/element/custom-edge/demo/custom-arrow.js
@@ -28,7 +28,7 @@ const data = {
       style: {
         endArrowSrc: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
         endArrowSize: 28,
-        endArrowTransform: 'rotate(90deg)',
+        endArrowTransform: [['rotate', 90]],
       },
     },
   ],
diff --git a/packages/site/examples/element/custom-node/demo/g2-activity-chart.js b/packages/site/examples/element/custom-node/demo/g2-activity-chart.js
index e41a738db0..c6aff2854a 100644
--- a/packages/site/examples/element/custom-node/demo/g2-activity-chart.js
+++ b/packages/site/examples/element/custom-node/demo/g2-activity-chart.js
@@ -59,7 +59,7 @@ class ActivityChart extends Circle {
           {
             type: 'image',
             encode: { x: 'name', y: 0, src: (d) => d.icon, size: 6 },
-            style: { transform: 'translateX(6)' },
+            style: { transform: [['translateX', 6]] },
           },
         ],
       },
diff --git a/packages/site/examples/layout/compact-box/demo/vertical.js b/packages/site/examples/layout/compact-box/demo/vertical.js
index 7c065b6ba5..0b4156643d 100644
--- a/packages/site/examples/layout/compact-box/demo/vertical.js
+++ b/packages/site/examples/layout/compact-box/demo/vertical.js
@@ -18,22 +18,25 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
       data: treeToGraphData(data),
       behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
       node: {
-        style: d => {
+        style: (d) => {
           const style = {
             labelText: d.id,
             labelPlacement: 'right',
             labelOffsetX: 2,
             labelBackground: true,
             ports: [{ placement: 'top' }, { placement: 'bottom' }],
-          }
+          };
           if (isLeafNode(d)) {
             Object.assign(style, {
-              labelTransform: 'rotate(90deg) translate(18px)',
+              labelTransform: [
+                ['rotate', 90],
+                ['translate', 18],
+              ],
               labelBaseline: 'center',
               labelTextAlign: 'left',
-            })
+            });
           }
-          return style
+          return style;
         },
         animation: {
           enter: false,
diff --git a/packages/site/examples/layout/custom/demo/arc.js b/packages/site/examples/layout/custom/demo/arc.js
index e76e3608e4..cb07486bc3 100644
--- a/packages/site/examples/layout/custom/demo/arc.js
+++ b/packages/site/examples/layout/custom/demo/arc.js
@@ -64,7 +64,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/70cde3be-22e8-4291-98f1-4d5
           labelText: (d) => d.name,
           labelTextAlign: 'start',
           labelTextBaseline: 'middle',
-          labelTransform: 'rotate(90)',
+          labelTransform: [['rotate', 90]],
         },
       },
       edge: {
diff --git a/packages/site/examples/layout/dendrogram/demo/vertical.js b/packages/site/examples/layout/dendrogram/demo/vertical.js
index 784a68c782..fd44d46df9 100644
--- a/packages/site/examples/layout/dendrogram/demo/vertical.js
+++ b/packages/site/examples/layout/dendrogram/demo/vertical.js
@@ -28,7 +28,10 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
           };
           if (isLeafNode(d)) {
             Object.assign(style, {
-              labelTransform: 'rotate(90deg) translate(18px)',
+              labelTransform: [
+                ['rotate', 90],
+                ['translate', 18],
+              ],
               labelBaseline: 'center',
               labelTextAlign: 'left',
             });
diff --git a/packages/site/examples/scene-case/default/demo/fund-flow.js b/packages/site/examples/scene-case/default/demo/fund-flow.js
index 49fe640e65..1168fb85d3 100644
--- a/packages/site/examples/scene-case/default/demo/fund-flow.js
+++ b/packages/site/examples/scene-case/default/demo/fund-flow.js
@@ -108,7 +108,7 @@ class TreeNode extends Rect {
       fontFamily: 'iconfont',
       fontSize: 16,
       text: '\ue62d',
-      transform: this.data.variableUp ? '' : 'rotate(180deg)',
+      transform: this.data.variableUp ? [] : [['rotate', 180]],
     };
   }
 
diff --git a/packages/site/examples/scene-case/default/demo/mindmap.js b/packages/site/examples/scene-case/default/demo/mindmap.js
index ee7f610812..7b8c7ea8bf 100644
--- a/packages/site/examples/scene-case/default/demo/mindmap.js
+++ b/packages/site/examples/scene-case/default/demo/mindmap.js
@@ -107,7 +107,7 @@ class MindmapNode extends BaseNode {
       fontSize: 8,
       text: '\ue6e4',
       textAlign: 'center',
-      transform: direction === 'left' ? 'rotate(90deg)' : 'rotate(-90deg)',
+      transform: direction === 'left' ? [['rotate', 90]] : [['rotate', -90]],
       visibility: showIcon ? 'visible' : 'hidden',
       x: direction === 'left' ? -6 : width + 6,
       y: height,
diff --git a/packages/site/examples/scene-case/default/demo/organization-chart.js b/packages/site/examples/scene-case/default/demo/organization-chart.js
index e4b3910767..73d24a5e34 100644
--- a/packages/site/examples/scene-case/default/demo/organization-chart.js
+++ b/packages/site/examples/scene-case/default/demo/organization-chart.js
@@ -29,14 +29,14 @@ class ChartNode extends Rect {
             fontSize: 20,
             fontWeight: 600,
             textAlign: 'center',
-            transform: 'translate(0,0)',
+            transform: [['translate', 0, 0]],
           }
         : {
             fill: '#2078B4',
             fontSize: 14,
             fontWeight: 400,
             textAlign: 'left',
-            transform: 'translate(-65, -15)',
+            transform: [['translate', -65, -15]],
           };
     return { text, ...labelStyle };
   }
@@ -57,7 +57,7 @@ class ChartNode extends Rect {
       textTransform: 'uppercase',
       fill: '#343f4a',
       textAlign: 'left',
-      transform: 'translate(-65, 0)',
+      transform: [['translate', -65, 0]],
     };
   }
 
@@ -72,7 +72,7 @@ class ChartNode extends Rect {
       text: this.data.status,
       fontSize: 8,
       textAlign: 'left',
-      transform: 'translate(40, -16)',
+      transform: [['translate', 40, -16]],
       padding: [0, 4],
       fill: '#fff',
       backgroundFill: statusColors[this.data.status],
@@ -91,7 +91,7 @@ class ChartNode extends Rect {
       fontSize: 8,
       fontWeight: 300,
       textAlign: 'left',
-      transform: 'translate(-65, 20)',
+      transform: [['translate', -65, 20]],
     };
   }
 
diff --git a/packages/site/package.json b/packages/site/package.json
index effc8a39fb..2a70aa8116 100644
--- a/packages/site/package.json
+++ b/packages/site/package.json
@@ -41,9 +41,9 @@
     "@ant-design/icons": "^5.5.1",
     "@antv/algorithm": "^0.1.26",
     "@antv/dumi-theme-antv": "^0.5.2",
-    "@antv/g": "^6.0.14",
-    "@antv/g-svg": "^2.0.12",
-    "@antv/g-webgl": "^2.0.19",
+    "@antv/g": "^6.1.2",
+    "@antv/g-svg": "^2.0.15",
+    "@antv/g-webgl": "^2.0.22",
     "@antv/g2": "^5.2.7",
     "@antv/g6": "workspace:*",
     "@antv/g6-extension-3d": "workspace:*",