From 50bb0cc1cbf1844a2922a49660ce4d5baf4a7bce Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Thu, 22 Feb 2024 15:56:21 +0800
Subject: [PATCH] refactor(runtime): adapt polyline and cubic edges (#5458)

* refactor(registry): register built-in edges

* fix(utils): fix getEllipseIntersectPoint get NaN result

* refactor(runtime): adapt more edges

* fix: fix cr issues
---
 .../demo/static/controller-layout-dagre.ts    |   1 -
 .../static/controller-layout-dendrogram.ts    |  10 +-
 .../demo/static/controller-layout-indented.ts |   1 -
 .../controller-element-1000(3_3).svg          |   4 +-
 .../animation/controller-element-200(2_3).svg |  12 +-
 .../animation/controller-element-50(1_3).svg  |  12 +-
 .../controller-element-position-1000(3_3).svg |  36 +--
 .../controller-element-position-200(2_3).svg  |  36 +--
 .../controller-element-state-0(1_2).svg       |  12 +-
 .../controller-element-state-1000(2_2).svg    |  12 +-
 .../static/controller-element-position.svg    |  36 +--
 .../static/controller-element-visibility.svg  |  12 +-
 .../controller-element-visibility__hidden.svg |  12 +-
 .../snapshots/static/controller-element.svg   |  12 +-
 .../static/controller-layout-circular.svg     | 256 +++++++++---------
 .../static/controller-layout-d3-force.svg     | 256 +++++++++---------
 .../static/controller-layout-dagre.svg        |  48 ++--
 .../static/controller-layout-dendrogram.svg   |  60 ++--
 .../static/controller-layout-grid.svg         | 256 +++++++++---------
 .../snapshots/static/graph-element.svg        | 240 ++++++++--------
 packages/g6/__tests__/unit/registry.spec.ts   |  16 +-
 .../g6/__tests__/unit/runtime/element.spec.ts |   8 -
 .../g6/__tests__/unit/utils/point.spec.ts     |  16 ++
 packages/g6/src/animations/executor.ts        |  32 +--
 packages/g6/src/elements/index.ts             |   2 +-
 packages/g6/src/registry/build-in.ts          |  16 +-
 packages/g6/src/runtime/element.ts            |  41 ++-
 packages/g6/src/themes/dark.ts                |   2 +-
 packages/g6/src/themes/light.ts               |   2 +-
 packages/g6/src/utils/animation.ts            |   5 +-
 packages/g6/src/utils/layout.ts               |   2 +-
 packages/g6/src/utils/point.ts                |   9 +-
 32 files changed, 755 insertions(+), 720 deletions(-)

diff --git a/packages/g6/__tests__/demo/static/controller-layout-dagre.ts b/packages/g6/__tests__/demo/static/controller-layout-dagre.ts
index 921cb57ae7e..8b004375a4a 100644
--- a/packages/g6/__tests__/demo/static/controller-layout-dagre.ts
+++ b/packages/g6/__tests__/demo/static/controller-layout-dagre.ts
@@ -21,7 +21,6 @@ export const controllerLayoutDagre: StaticTestCase = async ({ canvas, animation
     edge: {
       style: {
         type: 'polyline',
-        // TODO polyline
       },
     },
   };
diff --git a/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts b/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts
index 85a2577ad84..7fdf3f9c4cf 100644
--- a/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts
+++ b/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts
@@ -17,11 +17,17 @@ export const controllerLayoutDendrogram: StaticTestCase = async ({ canvas, anima
       animation,
     },
     node: {
-      style: { width: 20, height: 20, labelText: (data) => data.id, labelPosition: 'right', labelMaxWidth: 200 },
+      style: {
+        width: 20,
+        height: 20,
+        labelText: (data) => data.id,
+        labelPosition: 'right',
+        labelMaxWidth: 200,
+      },
     },
     edge: {
       style: {
-        type: 'polyline',
+        type: 'cubic-horizontal',
       },
     },
     zoom: 0.5,
diff --git a/packages/g6/__tests__/demo/static/controller-layout-indented.ts b/packages/g6/__tests__/demo/static/controller-layout-indented.ts
index 43190c0f987..a015f01baab 100644
--- a/packages/g6/__tests__/demo/static/controller-layout-indented.ts
+++ b/packages/g6/__tests__/demo/static/controller-layout-indented.ts
@@ -26,7 +26,6 @@ export const controllerLayoutIndented: StaticTestCase = async ({ canvas, animati
     edge: {
       style: {
         type: 'polyline',
-        // TODO polyline
       },
     },
     zoom: 0.5,
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
index 44d6c221bf9..dbb392e66c0 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,150)">
+          <g transform="matrix(1,0,0,1,133.320496,155.546997)">
             <path
               id="key"
               fill="none"
-              d="M 75,50 L 0,0"
+              d="M 58.358994113243114,38.90599607549541 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
index 6d6895ebfe5..afca458861e 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
               opacity="0.37293273049835485"
@@ -36,11 +36,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,144.060089)">
+          <g transform="matrix(1,0,0,1,132.455109,143.565216)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 C 37.5 2.9699547873765937,0 5.939909574753216,0 5.939909574753216"
+              d="M 60.08977711085029,0 C 30.04488855542516 3.4648363177795716,0 6.929672635559172,0 6.929672635559172"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -53,11 +53,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
               opacity="0.37293273049835485"
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
index fbd16ce8793..724fffbc9ef 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
               opacity="0.8255817601983712"
@@ -36,11 +36,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,76.162735)">
+          <g transform="matrix(1,0,0,1,131.404739,81.799889)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 C 37.5 36.91863201487784,0 73.83726402975567,0 73.83726402975567"
+              d="M 62.19052392232285,0 C 31.09526196116144 31.281476251723106,0 62.5629525034462,0 62.5629525034462"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -53,11 +53,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
               opacity="0.8255817601983712"
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
index 2c9d7315a08..4c068dc837e 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,175,100)">
+          <g transform="matrix(1,0,0,1,181,108)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,175,200)">
+          <g transform="matrix(1,0,0,1,185,200)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,100)">
+          <g transform="matrix(1,0,0,1,256,108)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -69,11 +69,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,200)">
+          <g transform="matrix(1,0,0,1,256,208)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -86,11 +86,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,100,200)">
+          <g transform="matrix(1,0,0,1,106,208)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -103,11 +103,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,175,200)">
+          <g transform="matrix(1,0,0,1,181,208)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 75,100"
+              d="M 0,0 L 63,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -120,11 +120,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,325,200)">
+          <g transform="matrix(1,0,0,1,331,208)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 75,100"
+              d="M 0,0 L 63,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -137,11 +137,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,100,300)">
+          <g transform="matrix(1,0,0,1,110,300)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -154,11 +154,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,300)">
+          <g transform="matrix(1,0,0,1,260,300)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
index 75fc1af3b4b..ed6a18b3d17 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,202.969955,137.293274)">
+          <g transform="matrix(1,0,0,1,206.732361,142.309814)">
             <path
               id="key"
               fill="none"
-              d="M 47.030045212623406,0 C 23.51502260631173 31.35336347508226,0 62.70672695016452,0 62.70672695016452"
+              d="M 39.505237978603674,0 C 19.75261898930185 26.336825319069106,0 52.67365063813821,0 52.67365063813821"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,202.969955,200)">
+          <g transform="matrix(1,0,0,1,209.240631,200)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 47.030045212623406 0,94.06009042524681 0,94.06009042524681 0"
+              d="M 0,0 C 40.75937251760695 0,81.5187450352139 0,81.5187450352139 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,137.293274)">
+          <g transform="matrix(1,0,0,1,253.762405,142.309814)">
             <path
               id="key"
               fill="none"
-              d="M 47.030045212623406,62.70672695016455 C 23.515022606311675 31.35336347508229,0 2.842170943040401e-14,0 2.842170943040401e-14"
+              d="M 39.505237978603645,52.67365063813821 C 19.752618989301823 26.336825319069106,0 0,0 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -69,11 +69,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,200)">
+          <g transform="matrix(1,0,0,1,253.762405,205.016541)">
             <path
               id="key"
               fill="none"
-              d="M 47.030045212623406,0 C 23.515022606311675 31.353363475082233,0 62.70672695016452,0 62.70672695016452"
+              d="M 39.505237978603645,0 C 19.752618989301823 26.336825319069078,0 52.67365063813821,0 52.67365063813821"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -86,11 +86,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,155.939911,200)">
+          <g transform="matrix(1,0,0,1,159.702316,205.016541)">
             <path
               id="key"
               fill="none"
-              d="M 47.03004521262338,0 C 23.515022606311703 31.353363475082233,0 62.70672695016452,0 62.70672695016452"
+              d="M 39.505237978603674,0 C 19.75261898930185 26.336825319069078,2.842170943040401e-14 52.67365063813821,2.842170943040401e-14 52.67365063813821"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -103,11 +103,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,202.969955,200)">
+          <g transform="matrix(1,0,0,1,206.732361,205.016541)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 23.51502260631173 31.353363475082233,47.030045212623406 62.70672695016452,47.030045212623406 62.70672695016452"
+              d="M 0,0 C 19.75261898930185 26.336825319069078,39.505237978603674 52.67365063813821,39.505237978603674 52.67365063813821"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -120,11 +120,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,297.030060,200)">
+          <g transform="matrix(1,0,0,1,300.792450,205.016541)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 23.515022606311675 31.353363475082233,47.03004521262335 62.70672695016452,47.03004521262335 62.70672695016452"
+              d="M 0,0 C 19.752618989301823 26.336825319069078,39.505237978603645 52.67365063813821,39.505237978603645 52.67365063813821"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -137,11 +137,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,155.939911,262.706726)">
+          <g transform="matrix(1,0,0,1,162.210587,262.706726)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 47.03004521262338 0,94.06009042524678 0,94.06009042524678 0"
+              d="M 0,0 C 40.75937251760692 0,81.51874503521387 0,81.51874503521387 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -154,11 +154,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,262.706726)">
+          <g transform="matrix(1,0,0,1,256.270660,262.706726)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 47.030045212623406 0,94.06009042524676 0,94.06009042524676 0"
+              d="M 0,0 C 40.75937251760695 0,81.51874503521384 0,81.51874503521384 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
index 211661af310..38ae63552cf 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(255,192,203,1)"
               stroke-width="2"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,50)">
+          <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
index 4e96506e46f..34cceb450c9 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,50)">
+          <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(255,192,203,1)"
               stroke-width="2"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
index 2c9d7315a08..4c068dc837e 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,175,100)">
+          <g transform="matrix(1,0,0,1,181,108)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,175,200)">
+          <g transform="matrix(1,0,0,1,185,200)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,100)">
+          <g transform="matrix(1,0,0,1,256,108)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -69,11 +69,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,200)">
+          <g transform="matrix(1,0,0,1,256,208)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -86,11 +86,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,100,200)">
+          <g transform="matrix(1,0,0,1,106,208)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -103,11 +103,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,175,200)">
+          <g transform="matrix(1,0,0,1,181,208)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 75,100"
+              d="M 0,0 L 63,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -120,11 +120,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,325,200)">
+          <g transform="matrix(1,0,0,1,331,208)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 75,100"
+              d="M 0,0 L 63,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -137,11 +137,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,100,300)">
+          <g transform="matrix(1,0,0,1,110,300)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -154,11 +154,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,300)">
+          <g transform="matrix(1,0,0,1,260,300)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
index b42832ab27c..4b0b372e518 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,50)">
+          <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
               opacity="0.5"
@@ -54,11 +54,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
               visibility="visible"
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility__hidden.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility__hidden.svg
index da8b35fc566..9150b908f0e 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility__hidden.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility__hidden.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,50)">
+          <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
               opacity="0.5"
@@ -54,11 +54,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
               visibility="hidden"
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
index 3fc6349a98f..d088c18aa22 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 150,0"
+              d="M 0,0 L 130,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,50)">
+          <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,0 L 0,100"
+              d="M 63,0 L 0,84"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,50)">
+          <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
-              d="M 75,100 L 0,0"
+              d="M 63,84 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
index 05c77300c4f..b4b075af413 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,50)">
+          <g transform="matrix(1,0,0,1,220.933777,50.980171)">
             <path
               id="key"
               fill="none"
-              d="M 39.01806640625,0 L 0,3.842945098876953"
+              d="M 19.11437192168171,0 L 0,1.8826017960431898"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,210.981934)">
+          <g transform="matrix(1,0,0,1,256.343933,218.712036)">
             <path
               id="key"
               fill="none"
-              d="M 0,239.01806640625 L 196.15704345703125,0"
+              d="M 0,223.5578568864364 L 183.46917832520296,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,53.842945)">
+          <g transform="matrix(1,0,0,1,211.962112,63.794792)">
             <path
               id="key"
               fill="none"
-              d="M 39.01806640625,396.15705490112305 L 0,0"
+              d="M 37.05772349420914,376.25336037806494 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -69,11 +69,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,50)">
+          <g transform="matrix(1,0,0,1,257.730103,56.343933)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 196.15704345703125,160.98193359375"
+              d="M 0,0 L 180.6968347127754,148.2940675169018"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -86,11 +86,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,53.842945)">
+          <g transform="matrix(1,0,0,1,219.296631,59.398647)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 235.17510986328125,157.13898849487305"
+              d="M 0,0 L 218.5457177450744,146.02758364314883"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -103,11 +103,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,250,50)">
+          <g transform="matrix(1,0,0,1,250,60)">
             <path
               id="key"
               fill="none"
-              d="M 0,400 L 0,0"
+              d="M 0,380 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -120,11 +120,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,53.842945,210.981934)">
+          <g transform="matrix(1,0,0,1,55.793850,220.789780)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 29.86313247680664,150.13211059570312"
+              d="M 0,0 L 25.961326169895756,130.5164049611013"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -137,11 +137,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,173.463318,65.224091)">
+          <g transform="matrix(1,0,0,1,183.415161,66.204262)">
             <path
               id="key"
               fill="none"
-              d="M 187.65072631835938,18.48198699951172 L 0,0"
+              d="M 167.74703182240486,16.521643812284225 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -154,11 +154,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,53.842945,65.224091)">
+          <g transform="matrix(1,0,0,1,60.186878,72.954193)">
             <path
               id="key"
               fill="none"
-              d="M 0,145.75784301757812 L 119.6203727722168,0"
+              d="M 0,130.29763407571858 L 106.93250693614942,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -171,11 +171,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,83.706078,83.706078)">
+          <g transform="matrix(1,0,0,1,90.777145,90.777145)">
             <path
               id="key"
               fill="none"
-              d="M 0,277.40796661376953 L 277.40796661376953,0"
+              d="M 0,263.2658309900386 L 263.2658309900386,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -188,11 +188,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,83.706078,65.224091)">
+          <g transform="matrix(1,0,0,1,86.608925,74.793495)">
             <path
               id="key"
               fill="none"
-              d="M 89.75724029541016,0 L 0,295.88995361328125"
+              d="M 83.95154650426696,0 L 0,276.7511469732767"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -205,11 +205,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,53.842945,83.706078)">
+          <g transform="matrix(1,0,0,1,63.081741,87.532913)">
             <path
               id="key"
               fill="none"
-              d="M 0,127.2758560180664 L 307.2710990905762,0"
+              d="M 0,119.6221873990226 L 288.7935084286456,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -222,11 +222,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,173.463318,289.018066)">
+          <g transform="matrix(1,0,0,1,182.282532,293.732025)">
             <path
               id="key"
               fill="none"
-              d="M 272.6937255859375,0 L 0,145.75784301757812"
+              d="M 255.05530056755367,0 L 0,136.32990777857424"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -239,11 +239,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,108.578644,108.578644)">
+          <g transform="matrix(1,0,0,1,113.292610,117.397858)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 180.43942260742188,337.5783996582031"
+              d="M 0,0 L 171.01148751597304,319.9399745609495"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -256,11 +256,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,289.018066,289.018066)">
+          <g transform="matrix(1,0,0,1,296.089142,296.089142)">
             <path
               id="key"
               fill="none"
-              d="M 157.13897705078125,0 L 0,157.13897705078125"
+              d="M 142.9968414270503,0 L 0,142.9968414270503"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -273,11 +273,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,108.578644,108.578644)">
+          <g transform="matrix(1,0,0,1,110.529549,118.386497)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 64.88467407226562,326.197265625"
+              d="M 0,0 L 60.98286741594552,306.58156005989997"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -290,11 +290,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,173.463318,434.775909)">
+          <g transform="matrix(1,0,0,1,183.415161,435.756073)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 115.55474853515625,11.381134033203125"
+              d="M 0,0 L 95.65105374440199,9.420793839129487"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -307,11 +307,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,108.578644,108.578644)">
+          <g transform="matrix(1,0,0,1,117.397858,113.292610)">
             <path
               id="key"
               fill="none"
-              d="M 337.5783996582031,180.43942260742188 L 0,0"
+              d="M 319.9399745609495,171.01148751597304 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -324,11 +324,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,108.578644,250)">
+          <g transform="matrix(1,0,0,1,117.817436,253.826828)">
             <path
               id="key"
               fill="none"
-              d="M 0,141.42135620117188 L 341.4213562011719,0"
+              d="M 0,133.76768755484795 L 322.9437655505411,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -341,11 +341,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,65.224091,173.463318)">
+          <g transform="matrix(1,0,0,1,72.295158,180.534393)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 261.3125915527344,261.3125915527344"
+              d="M 0,0 L 247.17045592900342,247.17045592900342"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -358,11 +358,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,326.536682,250)">
+          <g transform="matrix(1,0,0,1,332.092377,258.314697)">
             <path
               id="key"
               fill="none"
-              d="M 123.46331787109375,0 L 0,184.77590942382812"
+              d="M 112.35191306187482,0 L 0,168.14651727722014"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -375,11 +375,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,65.224091,173.463318)">
+          <g transform="matrix(1,0,0,1,67.174995,183.271164)">
             <path
               id="key"
               fill="none"
-              d="M 43.35455322265625,217.95803833007812 L 0,0"
+              d="M 39.45274645084888,198.34233278794997 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -392,11 +392,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,65.224091,173.463318)">
+          <g transform="matrix(1,0,0,1,75.031944,175.414215)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 384.7759094238281,76.53668212890625"
+              d="M 0,0 L 365.1602037677201,72.63487593011422"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -409,11 +409,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,108.578644,391.421356)">
+          <g transform="matrix(1,0,0,1,118.386497,393.372253)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 217.95803833007812,43.35455322265625"
+              d="M 0,0 L 198.34233278794997,39.45274645084885"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -426,11 +426,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,326.536682,65.224091)">
+          <g transform="matrix(1,0,0,1,327.516846,75.175941)">
             <path
               id="key"
               fill="none"
-              d="M 34.577362060546875,351.06982421875 L 0,0"
+              d="M 32.61701911937098,331.16612969856146 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -443,11 +443,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,416.293915,138.885956)">
+          <g transform="matrix(1,0,0,1,416.293915,148.885956)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 0,222.22808837890625"
+              d="M 0,0 L 0,202.22808837890625"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -460,11 +460,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,361.114044,361.114044)">
+          <g transform="matrix(1,0,0,1,368.185120,368.185120)">
             <path
               id="key"
               fill="none"
-              d="M 0,55.17987060546875 L 55.17987060546875,0"
+              d="M 0,41.0377349817378 L 41.0377349817378,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -477,11 +477,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,326.536682,65.224091)">
+          <g transform="matrix(1,0,0,1,334.266785,71.568024)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 89.75723266601562,73.661865234375"
+              d="M 0,0 L 74.29702427972995,60.9739987213389"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -494,11 +494,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,326.536682,65.224091)">
+          <g transform="matrix(1,0,0,1,329.439514,74.793495)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 89.75723266601562,295.88995361328125"
+              d="M 0,0 L 83.95153932677465,276.7511468361937"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -511,11 +511,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,361.114044,138.885956)">
+          <g transform="matrix(1,0,0,1,363.064941,148.693802)">
             <path
               id="key"
               fill="none"
-              d="M 0,277.407958984375 L 55.17987060546875,0"
+              d="M 0,257.7922533323914 L 51.278064385942116,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -528,11 +528,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,250)">
+          <g transform="matrix(1,0,0,1,54.713966,258.819214)">
             <path
               id="key"
               fill="none"
-              d="M 88.88595581054688,166.29391479492188 L 0,0"
+              d="M 79.45802053681615,148.65548979509992 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -545,11 +545,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,53.842945,108.578644)">
+          <g transform="matrix(1,0,0,1,62.662159,113.292610)">
             <path
               id="key"
               fill="none"
-              d="M 0,180.43942260742188 L 337.5784111022949,0"
+              d="M 0,171.01148776456262 L 319.9399858721674,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -562,11 +562,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,250)">
+          <g transform="matrix(1,0,0,1,50.980171,259.951843)">
             <path
               id="key"
               fill="none"
-              d="M 3.842945098876953,39.01806640625 L 0,0"
+              d="M 1.8826017960431756,19.11437192168171 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -579,11 +579,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,138.885956,108.578644)">
+          <g transform="matrix(1,0,0,1,145.229889,116.308746)">
             <path
               id="key"
               fill="none"
-              d="M 252.535400390625,0 L 0,307.71527099609375"
+              d="M 239.84753459116655,0 L 0,292.25506202419"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -596,11 +596,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,53.842945,289.018066)">
+          <g transform="matrix(1,0,0,1,59.398647,297.332764)">
             <path
               id="key"
               fill="none"
-              d="M 85.04301071166992,127.27584838867188 L 0,0"
+              d="M 73.93160535617528,110.64645660707367 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -613,11 +613,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,108.578644)">
+          <g transform="matrix(1,0,0,1,59.238796,112.405479)">
             <path
               id="key"
               fill="none"
-              d="M 0,141.42135620117188 L 341.4213562011719,0"
+              d="M 0,133.76768755484795 L 322.9437655505411,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -630,11 +630,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,83.706078,138.885956)">
+          <g transform="matrix(1,0,0,1,92.525291,143.599930)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 351.06983184814453,187.65072631835938"
+              d="M 0,0 L 333.43140638779505,178.2227919062151"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -647,11 +647,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,173.463318)">
+          <g transform="matrix(1,0,0,1,217.325867,181.193420)">
             <path
               id="key"
               fill="none"
-              d="M 223.79397583007812,0 L 0,272.6937255859375"
+              d="M 211.10610950822687,0 L 0,257.23351704275046"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -664,11 +664,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,434.775909,173.463318)">
+          <g transform="matrix(1,0,0,1,434.775909,183.463318)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 0,153.0733642578125"
+              d="M 0,0 L 0,133.0733642578125"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -681,11 +681,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,83.706078,138.885956)">
+          <g transform="matrix(1,0,0,1,87.532913,148.124756)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 127.2758560180664,307.2710876464844"
+              d="M 0,0 L 119.6221871557126,288.79349708533607"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -698,11 +698,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,326.536682)">
+          <g transform="matrix(1,0,0,1,219.801147,331.250641)">
             <path
               id="key"
               fill="none"
-              d="M 0,119.620361328125 L 223.79397583007812,0"
+              d="M 0,110.19242726051186 L 206.1555501855729,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -715,11 +715,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,83.706078,138.885956)">
+          <g transform="matrix(1,0,0,1,93.657928,139.866135)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 351.06983184814453,34.577362060546875"
+              d="M 0,0 L 331.1661373238004,32.617019161563576"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -732,11 +732,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,65.224091,326.536682)">
+          <g transform="matrix(1,0,0,1,75.031944,328.487579)">
             <path
               id="key"
               fill="none"
-              d="M 326.197265625,64.88467407226562 L 0,0"
+              d="M 306.58156005989997,60.98286741594552 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -749,11 +749,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,138.885956,53.842945)">
+          <g transform="matrix(1,0,0,1,148.693802,55.793850)">
             <path
               id="key"
               fill="none"
-              d="M 0,29.86313247680664 L 150.13211059570312,0"
+              d="M 0,25.961326169895756 L 130.5164049611013,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -766,11 +766,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,65.224091,53.842945)">
+          <g transform="matrix(1,0,0,1,71.568024,61.573048)">
             <path
               id="key"
               fill="none"
-              d="M 223.79397583007812,0 L 0,272.6937370300293"
+              d="M 211.10610982640148,0 L 0,257.23352822572315"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -783,11 +783,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,138.885956,83.706078)">
+          <g transform="matrix(1,0,0,1,145.229889,91.436180)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 252.535400390625,307.7152786254883"
+              d="M 0,0 L 239.8475347791416,292.2550694993174"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -800,11 +800,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,65.224091,83.706078)">
+          <g transform="matrix(1,0,0,1,68.126938,93.275482)">
             <path
               id="key"
               fill="none"
-              d="M 0,242.83060455322266 L 73.661865234375,0"
+              d="M 0,223.6917979844958 L 67.85617120826088,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -817,11 +817,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,289.018066,53.842945)">
+          <g transform="matrix(1,0,0,1,291.920898,63.412350)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 102.40328979492188,337.5784111022949"
+              d="M 0,0 L 96.5975963365546,318.43960436134387"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -834,11 +834,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,173.463318,65.224091)">
+          <g transform="matrix(1,0,0,1,182.282532,69.938057)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 272.6937255859375,145.75784301757812"
+              d="M 0,0 L 255.05530056755367,136.32990777857424"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -851,11 +851,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,173.463318,250)">
+          <g transform="matrix(1,0,0,1,181.778015,255.555710)">
             <path
               id="key"
               fill="none"
-              d="M 276.53668212890625,0 L 0,184.77590942382812"
+              d="M 259.90729004464333,0 L 0,173.66450452130326"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -868,11 +868,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,53.842945)">
+          <g transform="matrix(1,0,0,1,220.789780,55.793850)">
             <path
               id="key"
               fill="none"
-              d="M 150.13211059570312,29.86313247680664 L 0,0"
+              d="M 130.5164049611013,25.961326169895756 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -885,11 +885,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,289.018066,434.775909)">
+          <g transform="matrix(1,0,0,1,298.587463,437.678741)">
             <path
               id="key"
               fill="none"
-              d="M 0,11.381134033203125 L 37.51861572265625,0"
+              d="M 0,5.575446850333606 L 18.379807078055023,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -902,11 +902,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,50,250)">
+          <g transform="matrix(1,0,0,1,59.569405,252.902847)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 366.2939147949219,111.11404418945312"
+              d="M 0,0 L 347.155108078984,105.30835064862879"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -919,11 +919,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,65.224091,326.536682)">
+          <g transform="matrix(1,0,0,1,75.224091,326.536682)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 369.55181884765625,0"
+              d="M 0,0 L 349.55181884765625,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -936,11 +936,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,391.421356,108.578644)">
+          <g transform="matrix(1,0,0,1,397.765289,116.308746)">
             <path
               id="key"
               fill="none"
-              d="M 24.87255859375,30.30731201171875 L 0,0"
+              d="M 12.184695831015688,14.847100547640366 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -953,11 +953,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,391.421356)">
+          <g transform="matrix(1,0,0,1,220.551331,394.324188)">
             <path
               id="key"
               fill="none"
-              d="M 180.43942260742188,0 L 0,54.735687255859375"
+              d="M 161.30061550432004,0 L 0,48.92999499134362"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -970,11 +970,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,173.463318,210.981934)">
+          <g transform="matrix(1,0,0,1,181.193420,217.325867)">
             <path
               id="key"
               fill="none"
-              d="M 272.6937255859375,0 L 0,223.79397583007812"
+              d="M 257.23351704275046,0 L 0,211.10610950822687"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -987,11 +987,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,416.293915,326.536682)">
+          <g transform="matrix(1,0,0,1,421.007874,335.355896)">
             <path
               id="key"
               fill="none"
-              d="M 0,34.577362060546875 L 18.48199462890625,0"
+              d="M 0,16.938938800089886 L 9.054056101053561,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1004,11 +1004,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,53.842945)">
+          <g transform="matrix(1,0,0,1,213.884781,63.412350)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 115.55474853515625,380.9329643249512"
+              d="M 0,0 L 109.7490551220892,361.79415757025845"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1021,11 +1021,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,108.578644)">
+          <g transform="matrix(1,0,0,1,215.695908,117.397858)">
             <path
               id="key"
               fill="none"
-              d="M 180.43942260742188,0 L 0,337.5783996582031"
+              d="M 171.01148751597304,0 L 0,319.9399745609495"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1038,11 +1038,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,173.463318,326.536682)">
+          <g transform="matrix(1,0,0,1,182.702118,330.363525)">
             <path
               id="key"
               fill="none"
-              d="M 261.3125915527344,0 L 0,108.23922729492188"
+              d="M 242.83500109888158,0 L 0,100.58555817353385"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1055,11 +1055,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,434.775909)">
+          <g transform="matrix(1,0,0,1,220.933777,435.756073)">
             <path
               id="key"
               fill="none"
-              d="M 0,11.381134033203125 L 115.55474853515625,0"
+              d="M 0,9.420793839129487 L 95.65105374440199,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1072,11 +1072,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.981934,326.536682)">
+          <g transform="matrix(1,0,0,1,219.801147,331.250641)">
             <path
               id="key"
               fill="none"
-              d="M 0,119.620361328125 L 223.79397583007812,0"
+              d="M 0,110.19242726051186 L 206.1555501855729,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1089,11 +1089,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,173.463318,434.775909)">
+          <g transform="matrix(1,0,0,1,183.463318,434.775909)">
             <path
               id="key"
               fill="none"
-              d="M 153.0733642578125,0 L 0,0"
+              d="M 133.0733642578125,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg
index 68bac37bfac..3a2389a122f 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,275.677155,259.379944)">
+          <g transform="matrix(1,0,0,1,285.386841,261.772034)">
             <path
               id="key"
               fill="none"
-              d="M 65.7183837890625,16.190399169921875 L 0,0"
+              d="M 46.299016970241155,11.406238600285633 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,303.769531,210.627548)">
+          <g transform="matrix(1,0,0,1,304.601837,220.592850)">
             <path
               id="key"
               fill="none"
-              d="M 5.48565673828125,65.68141174316406 L 0,0"
+              d="M 3.821068952211931,45.75080343577744 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,275.677155,259.379944)">
+          <g transform="matrix(1,0,0,1,284.606476,263.881836)">
             <path
               id="key"
               fill="none"
-              d="M 33.578033447265625,16.92901611328125 L 0,0"
+              d="M 15.719372582004667,7.925226239033918 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -69,11 +69,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,303.769531,210.627548)">
+          <g transform="matrix(1,0,0,1,308.782654,219.280212)">
             <path
               id="key"
               fill="none"
-              d="M 37.626007080078125,64.94279479980469 L 0,0"
+              d="M 27.599784454648102,47.63745285388188 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -86,11 +86,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,275.677155,210.627548)">
+          <g transform="matrix(1,0,0,1,280.669830,219.292023)">
             <path
               id="key"
               fill="none"
-              d="M 0,48.75239562988281 L 28.092376708984375,0"
+              d="M 0,31.423454332594815 L 18.106997721927996,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -103,11 +103,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,309.255188,275.570343)">
+          <g transform="matrix(1,0,0,1,319.252563,275.800079)">
             <path
               id="key"
               fill="none"
-              d="M 0,0.738616943359375 L 32.140350341796875,0"
+              d="M 0,0.27911854248657164 L 12.145629508046909,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -120,11 +120,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,160.244476,283.936005)">
+          <g transform="matrix(1,0,0,1,169.613129,287.432892)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 77.68789672851562,28.997344970703125"
+              d="M 0,0 L 58.95058152341346,22.003560665718624"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -137,11 +137,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,197.449738,269.961487)">
+          <g transform="matrix(1,0,0,1,202.189819,278.766693)">
             <path
               id="key"
               fill="none"
-              d="M 0,47.38604736328125 L 25.50921630859375,0"
+              d="M 0,29.775640729732345 L 16.02904868343765,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -154,11 +154,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,160.244476,269.961487)">
+          <g transform="matrix(1,0,0,1,170.005096,272.136414)">
             <path
               id="key"
               fill="none"
-              d="M 0,13.974517822265625 L 62.7144775390625,0"
+              d="M 0,9.62464740607777 L 43.193242246121315,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -171,11 +171,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,197.449738,312.933350)">
+          <g transform="matrix(1,0,0,1,207.390808,314.017303)">
             <path
               id="key"
               fill="none"
-              d="M 40.482635498046875,0 L 0,4.4141845703125"
+              d="M 20.60048064679063,0 L 0,2.2462550348648165"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -188,11 +188,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,222.958954,269.961487)">
+          <g transform="matrix(1,0,0,1,226.249390,279.404633)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 14.973419189453125,42.97186279296875"
+              d="M 0,0 L 8.39254558453564,24.08556875215436"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -205,11 +205,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,160.244476,283.936005)">
+          <g transform="matrix(1,0,0,1,167.684692,290.617554)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 37.20526123046875,33.411529541015625"
+              d="M 0,0 L 22.324828519012613,20.048419037849612"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -222,11 +222,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,177.226791,169.148727)">
+          <g transform="matrix(1,0,0,1,186.499161,172.893478)">
             <path
               id="key"
               fill="none"
-              d="M 0,26.9532470703125 L 66.73878479003906,0"
+              d="M 0,19.463736297078697 L 48.19404892301702,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -239,11 +239,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,188.995132,134.980118)">
+          <g transform="matrix(1,0,0,1,193.125473,144.087265)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 17.091995239257812,37.68675231933594"
+              d="M 0,0 L 8.831299066594852,19.472447535925937"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -256,11 +256,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,177.226791,172.666870)">
+          <g transform="matrix(1,0,0,1,184.989761,178.970535)">
             <path
               id="key"
               fill="none"
-              d="M 0,23.435104370117188 L 28.860336303710938,0"
+              d="M 0,10.827762767331478 L 13.334392283759371,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -273,11 +273,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,188.995132,134.980118)">
+          <g transform="matrix(1,0,0,1,197.488144,140.259216)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 54.97044372558594,34.168609619140625"
+              d="M 0,0 L 37.98443148933569,23.61041903978679"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -290,11 +290,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,206.087128,169.148727)">
+          <g transform="matrix(1,0,0,1,216.044266,170.073547)">
             <path
               id="key"
               fill="none"
-              d="M 37.878448486328125,0 L 0,3.5181427001953125"
+              d="M 17.964160896126486,0 L 0,1.6685076619401116"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -307,11 +307,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,177.226791,134.980118)">
+          <g transform="matrix(1,0,0,1,179.117462,144.799759)">
             <path
               id="key"
               fill="none"
-              d="M 0,61.121856689453125 L 11.768341064453125,0"
+              d="M 0,41.4825706765136 L 7.987012607156828,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -324,11 +324,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,200.189545,191.777374)">
+          <g transform="matrix(1,0,0,1,209.175552,196.165054)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 42.41583251953125,20.710784912109375"
+              d="M 0,0 L 24.443826634727543,11.935421416699"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -341,11 +341,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,227.923813,183.835205)">
+          <g transform="matrix(1,0,0,1,233.276840,192.281815)">
             <path
               id="key"
               fill="none"
-              d="M 36.39128112792969,0 L 0,57.42230224609375"
+              d="M 25.685237828720233,0 L 0,40.5290895002762"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -358,11 +358,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,227.923813,212.488159)">
+          <g transform="matrix(1,0,0,1,232.469330,221.395355)">
             <path
               id="key"
               fill="none"
-              d="M 14.681564331054688,0 L 0,28.76934814453125"
+              d="M 5.5905236595721135,0 L 0,10.95494443546903"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -375,11 +375,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,200.189545,183.835205)">
+          <g transform="matrix(1,0,0,1,210.113724,185.064346)">
             <path
               id="key"
               fill="none"
-              d="M 0,7.942169189453125 L 64.12554931640625,0"
+              d="M 0,5.483883494530858 L 44.277203505177056,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -392,11 +392,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,242.605377,183.835205)">
+          <g transform="matrix(1,0,0,1,248.644470,191.805740)">
             <path
               id="key"
               fill="none"
-              d="M 21.709716796875,0 L 0,28.6529541015625"
+              d="M 9.631526169165795,0 L 0,12.711896697465477"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -409,11 +409,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,200.189545,191.777374)">
+          <g transform="matrix(1,0,0,1,205.078979,200.500519)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 27.734268188476562,49.480133056640625"
+              d="M 0,0 L 17.95538547068122,32.03383107623216"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -426,11 +426,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,346.301971,234.395782)">
+          <g transform="matrix(1,0,0,1,355.487396,238.349030)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 41.88153076171875,18.025100708007812"
+              d="M 0,0 L 23.510701638205774,10.118607344026088"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -443,11 +443,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,316.385010,281.827637)">
+          <g transform="matrix(1,0,0,1,325.816040,285.152618)">
             <path
               id="key"
               fill="none"
-              d="M 44.056182861328125,0 L 0,15.5323486328125"
+              d="M 25.194107472599853,0 L 0,8.88237780355837"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -460,11 +460,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,316.385010,234.395782)">
+          <g transform="matrix(1,0,0,1,320.676636,243.428055)">
             <path
               id="key"
               fill="none"
-              d="M 29.916961669921875,0 L 0,62.964202880859375"
+              d="M 21.333726782660847,0 L 0,44.8996497762264"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -477,11 +477,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,360.441193,252.420883)">
+          <g transform="matrix(1,0,0,1,367.303406,259.694794)">
             <path
               id="key"
               fill="none"
-              d="M 27.7423095703125,0 L 0,29.406753540039062"
+              d="M 14.017877671133874,0 L 0,14.858902528813815"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -494,11 +494,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,316.385010,252.420883)">
+          <g transform="matrix(1,0,0,1,324.861542,257.726379)">
             <path
               id="key"
               fill="none"
-              d="M 71.79849243164062,0 L 0,44.93910217285156"
+              d="M 54.845432547156406,0 L 0,34.328081460729095"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -511,11 +511,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,346.301971,234.395782)">
+          <g transform="matrix(1,0,0,1,349.158691,243.979050)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 14.13922119140625,47.431854248046875"
+              d="M 0,0 L 8.425761374381068,28.26531108243566"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -528,11 +528,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,292.590698,255.571869)">
+          <g transform="matrix(1,0,0,1,300.778778,261.312561)">
             <path
               id="key"
               fill="none"
-              d="M 0,34.3658447265625 L 49.01690673828125,0"
+              d="M 0,22.884490695263935 L 32.64074999721447,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -545,11 +545,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,274.875397,225.600021)">
+          <g transform="matrix(1,0,0,1,284.398529,228.651245)">
             <path
               id="key"
               fill="none"
-              d="M 42.484893798828125,0 L 0,13.61224365234375"
+              d="M 23.438634477213668,0 L 0,7.509784651759162"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -562,11 +562,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,317.360291,225.600021)">
+          <g transform="matrix(1,0,0,1,323.649841,233.374451)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 24.247314453125,29.971847534179688"
+              d="M 0,0 L 11.668242614864084,14.42299060873745"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -579,11 +579,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,274.875397,239.212265)">
+          <g transform="matrix(1,0,0,1,278.172485,248.653091)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 17.715301513671875,50.72544860839844"
+              d="M 0,0 L 11.121096505942432,31.843805133424212"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -596,11 +596,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,292.590698,225.600021)">
+          <g transform="matrix(1,0,0,1,296.183563,234.932297)">
             <path
               id="key"
               fill="none"
-              d="M 0,64.33769226074219 L 24.76959228515625,0"
+              d="M 0,45.67314562466029 L 17.58386345159147,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -613,11 +613,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,274.875397,239.212265)">
+          <g transform="matrix(1,0,0,1,284.587799,241.593292)">
             <path
               id="key"
               fill="none"
-              d="M 66.73220825195312,16.359603881835938 L 0,0"
+              d="M 47.307407377664276,11.597554848675031 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -630,11 +630,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.230453,254.535294)">
+          <g transform="matrix(1,0,0,1,210.552277,264.530121)">
             <path
               id="key"
               fill="none"
-              d="M 2.4401702880859375,75.78550720214844 L 0,0"
+              d="M 1.7965363123319094,55.795866502394574 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -647,11 +647,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,156.446075,279.684601)">
+          <g transform="matrix(1,0,0,1,161.796051,288.133148)">
             <path
               id="key"
               fill="none"
-              d="M 0,37.173675537109375 L 23.53997802734375,0"
+              d="M 0,20.27660579515259 L 12.840023161296472,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -664,11 +664,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,156.446075,254.535294)">
+          <g transform="matrix(1,0,0,1,162.979492,262.105927)">
             <path
               id="key"
               fill="none"
-              d="M 0,62.32298278808594 L 53.78437805175781,0"
+              d="M 0,47.18171449768715 L 40.71755002969502,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -681,11 +681,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,179.986053,279.684601)">
+          <g transform="matrix(1,0,0,1,185.409210,288.086365)">
             <path
               id="key"
               fill="none"
-              d="M 32.6845703125,50.636199951171875 L 0,0"
+              d="M 21.83827140999972,33.8326943610391 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -698,11 +698,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,179.986053,254.535294)">
+          <g transform="matrix(1,0,0,1,187.675064,260.928986)">
             <path
               id="key"
               fill="none"
-              d="M 0,25.149307250976562 L 30.244400024414062,0"
+              d="M 0,12.361938306781099 L 14.866389896799149,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -715,11 +715,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,156.446075,316.858276)">
+          <g transform="matrix(1,0,0,1,166.171173,319.186890)">
             <path
               id="key"
               fill="none"
-              d="M 56.22454833984375,13.4625244140625 L 0,0"
+              d="M 36.77434257835819,8.805326132276036 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -732,11 +732,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,197.142181,226.394684)">
+          <g transform="matrix(1,0,0,1,197.618118,236.383347)">
             <path
               id="key"
               fill="none"
-              d="M 3.34283447265625,0 L 0,70.15682983398438"
+              d="M 2.390953877800314,0 L 0,50.179494592938426"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -749,11 +749,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,163.997635,249.008728)">
+          <g transform="matrix(1,0,0,1,173.859390,250.665756)">
             <path
               id="key"
               fill="none"
-              d="M 77.30699157714844,12.98956298828125 L 0,0"
+              d="M 57.58347714985695,9.675505258484577 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -766,11 +766,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,163.997635,249.008728)">
+          <g transform="matrix(1,0,0,1,169.716568,257.212006)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 33.14454650878906,47.54278564453125"
+              d="M 0,0 L 21.70668065122203,31.136225230346213"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -783,11 +783,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,200.485016,226.394684)">
+          <g transform="matrix(1,0,0,1,208.021164,232.967850)">
             <path
               id="key"
               fill="none"
-              d="M 40.819610595703125,35.603607177734375 L 0,0"
+              d="M 25.7473168852531,22.457278324935658 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -800,11 +800,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,197.142181,261.998291)">
+          <g transform="matrix(1,0,0,1,205.017990,268.160400)">
             <path
               id="key"
               fill="none"
-              d="M 0,34.55322265625 L 44.162445068359375,0"
+              d="M 0,22.228979906481186 L 28.41084068516176,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -817,11 +817,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,163.997635,226.394684)">
+          <g transform="matrix(1,0,0,1,172.497513,231.662704)">
             <path
               id="key"
               fill="none"
-              d="M 0,22.614044189453125 L 36.48738098144531,0"
+              d="M 0,12.077987708413616 L 19.48763057656157,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -834,11 +834,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,222.958954,210.627548)">
+          <g transform="matrix(1,0,0,1,231.019531,216.545914)">
             <path
               id="key"
               fill="none"
-              d="M 0,59.33393859863281 L 80.81057739257812,0"
+              d="M 0,47.49721684412472 L 64.68941062009063,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -851,11 +851,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,242.605377,169.148727)">
+          <g transform="matrix(1,0,0,1,242.919067,179.143799)">
             <path
               id="key"
               fill="none"
-              d="M 0,43.33943176269531 L 1.360198974609375,0"
+              d="M 0,23.34927454247952 L 0.732812083565193,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -868,11 +868,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,197.449738,259.379944)">
+          <g transform="matrix(1,0,0,1,205.484253,265.333649)">
             <path
               id="key"
               fill="none"
-              d="M 0,57.96759033203125 L 78.2274169921875,0"
+              d="M 0,46.060206972013475 L 62.15837154706003,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -885,11 +885,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,206.087128,172.666870)">
+          <g transform="matrix(1,0,0,1,209.120728,182.195633)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 21.836685180664062,68.59063720703125"
+              d="M 0,0 L 15.769485717517512,49.533116626578135"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -902,11 +902,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,316.385010,255.571869)">
+          <g transform="matrix(1,0,0,1,321.552490,264.133240)">
             <path
               id="key"
               fill="none"
-              d="M 25.22259521484375,0 L 0,41.788116455078125"
+              d="M 14.887605301992721,0 L 0,24.665383510210177"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -919,11 +919,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,197.142181,254.535294)">
+          <g transform="matrix(1,0,0,1,200.116272,264.082794)">
             <path
               id="key"
               fill="none"
-              d="M 0,42.01622009277344 L 13.088272094726562,0"
+              d="M 0,22.921220481907312 L 7.140079944079048,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -936,11 +936,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,274.875397,239.212265)">
+          <g transform="matrix(1,0,0,1,283.826660,243.670380)">
             <path
               id="key"
               fill="none"
-              d="M 85.5657958984375,42.61537170410156 L 0,0"
+              d="M 67.66325375391591,33.69915138584861 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -953,11 +953,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,179.986053,226.394684)">
+          <g transform="matrix(1,0,0,1,183.576279,235.727966)">
             <path
               id="key"
               fill="none"
-              d="M 20.49896240234375,0 L 0,53.2899169921875"
+              d="M 13.318514068137858,0 L 0,34.62333825585233"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -970,11 +970,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,243.965576,169.148727)">
+          <g transform="matrix(1,0,0,1,252.182602,174.847885)">
             <path
               id="key"
               fill="none"
-              d="M 59.803955078125,41.47882080078125 L 0,0"
+              d="M 43.36990199339846,30.080492010630053 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -987,11 +987,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.230453,254.535294)">
+          <g transform="matrix(1,0,0,1,219.504242,258.276520)">
             <path
               id="key"
               fill="none"
-              d="M 106.15455627441406,42.82469177246094 L 0,0"
+              d="M 87.60696545486815,35.34225401523929 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1004,11 +1004,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,227.923813,241.257507)">
+          <g transform="matrix(1,0,0,1,237.273193,244.805603)">
             <path
               id="key"
               fill="none"
-              d="M 47.75334167480469,18.1224365234375 L 0,0"
+              d="M 29.05457299977013,11.02623683363555 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1021,11 +1021,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,179.986053,239.212265)">
+          <g transform="matrix(1,0,0,1,189.184311,243.135529)">
             <path
               id="key"
               fill="none"
-              d="M 94.88934326171875,0 L 0,40.47233581542969"
+              d="M 76.4928154377219,0 L 0,32.62582295805734"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1038,11 +1038,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,210.230453,169.148727)">
+          <g transform="matrix(1,0,0,1,213.904938,178.449173)">
             <path
               id="key"
               fill="none"
-              d="M 0,85.38656616210938 L 33.73512268066406,0"
+              d="M 0,66.78568703540225 L 26.386157058644187,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1055,11 +1055,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,179.986053,241.257507)">
+          <g transform="matrix(1,0,0,1,187.788635,247.512085)">
             <path
               id="key"
               fill="none"
-              d="M 0,38.427093505859375 L 47.93775939941406,0"
+              d="M 0,25.917937139470183 L 32.33259977186697,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1072,11 +1072,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,179.986053,254.535294)">
+          <g transform="matrix(1,0,0,1,187.675064,260.928986)">
             <path
               id="key"
               fill="none"
-              d="M 0,25.149307250976562 L 30.244400024414062,0"
+              d="M 0,12.361938306781099 L 14.866389896799149,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1089,11 +1089,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,227.923813,169.148727)">
+          <g transform="matrix(1,0,0,1,230.095383,178.910095)">
             <path
               id="key"
               fill="none"
-              d="M 0,72.10877990722656 L 16.041763305664062,0"
+              d="M 0,52.5860477212176 L 11.698616060477661,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
index e510e0c783f..044e8a7df9f 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,154.284760,23.713907)">
+          <g transform="matrix(1,0,0,1,145,21.961161)">
             <path
               id="key"
               fill="none"
-              d="M 106.43046618229482,0 L 0,42.57218647291793"
+              d="M 115.19419324309081,0 L 0,23.038838648618157 L 0,38.03883864861815"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,276.476471,27.619392)">
+          <g transform="matrix(1,0,0,1,279.893585,21.454941)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 157.04703159808923,184.76121364481082"
+              d="M 0,0 L 160.1064086463515,23.545060095051678 L 160.1064086463515,48.54506009505168 L 160.1064086463515,73.54506009505168 L 160.1064086463515,98.54506009505168 L 160.1064086463515,123.54506009505168 L 160.1064086463515,148.54506009505167 L 160.1064086463515,173.54506009505167 L 160.1064086463515,188.54506009505167"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,150.734619,78.192322)">
+          <g transform="matrix(1,0,0,1,145,80)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 23.530753112733407,33.6153615896192"
+              d="M 0,0 L 0,15 L 26.862665287932657,34.18761806280904"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -69,11 +69,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,278.137329,25.812382)">
+          <g transform="matrix(1,0,0,1,279.417419,23.363363)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 53.725330575865314,38.37523612561807"
+              d="M 0,0 L 60.58258088405165,21.636636030018437 L 60.58258088405165,36.63663603001844"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -86,11 +86,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,189.544800,72.982750)">
+          <g transform="matrix(1,0,0,1,189.771759,74.856430)">
             <path
               id="key"
               fill="none"
-              d="M 140.91040043929942,0 L 0,44.03450013728107"
+              d="M 141.48666359955664,0 L 105.228236360772,20.143570688213686 L 0,43.019274244903244"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -103,11 +103,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,108.479980,125.299988)">
+          <g transform="matrix(1,0,0,1,100,122.982750)">
             <path
               id="key"
               fill="none"
-              d="M 63.040033919898235,0 L 0,39.400021199936404"
+              d="M 70.4552002196497,0 L 0,22.017250068640536 L 0,37.017250068640536"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -120,11 +120,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,188.479980,125.299988)">
+          <g transform="matrix(1,0,0,1,189.544800,122.982750)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 63.040033919898235,39.400021199936404"
+              d="M 0,0 L 70.4552002196497,22.017250068640536 L 70.4552002196497,37.017250068640536"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -137,11 +137,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,108.479980,175.299988)">
+          <g transform="matrix(1,0,0,1,109.544800,172.982742)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 63.040033919898235,39.40002119993642"
+              d="M 0,0 L 70.4552002196497,22.01725006864052 L 70.4552002196497,37.01725006864052"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -154,11 +154,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,28.479982,175.299988)">
+          <g transform="matrix(1,0,0,1,20,172.982742)">
             <path
               id="key"
               fill="none"
-              d="M 63.040033919898235,0 L 0,39.40002119993642"
+              d="M 70.4552002196497,0 L 0,22.01725006864052 L 0,37.01725006864052"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -171,11 +171,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,29.887156,221.498047)">
+          <g transform="matrix(1,0,0,1,20,230)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 310.22568991550463,47.00389241144012"
+              d="M 0,0 L 0,15 L 320.0285731197205,39.24458887270612"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -188,11 +188,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,358.741577,224.856430)">
+          <g transform="matrix(1,0,0,1,359.635193,230)">
             <path
               id="key"
               fill="none"
-              d="M 72.51685447756927,0 L 0,40.28714137642737"
+              d="M 80.3648209037006,0 L 80.3648209037006,15 L 0,37.32356136213906"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -205,11 +205,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,340.499390,79.987526)">
+          <g transform="matrix(1,0,0,1,343.713898,79.284767)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 9.001247661122193,180.0249532224431"
+              d="M 0,0 L 6.286093236458953,15.715233091147411 L 6.286093236458953,40.71523309114741 L 6.286093236458953,65.71523309114741 L 6.286093236458953,90.71523309114741 L 6.286093236458953,115.71523309114741 L 6.286093236458953,140.7152330911474 L 6.286093236458953,165.7152330911474 L 6.286093236458953,180.7152330911474"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
index 24f6e304584..2aafeae188f 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
@@ -22,7 +22,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,323.86768229518907 L 483.3846004405807,0"
+              d="M 0,323.8676822951891 C 241.69230022029035 323.8676822951891,241.69230022029032 5.684341886080802e-14,483.3846004405807 5.684341886080802e-14"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -39,7 +39,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.45084401268025,49.777382306738936"
+              d="M 0,0 C 115.22542200634012 0,115.22542200634014 49.777382306738936,230.45084401268025 49.777382306738936"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -56,7 +56,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 483.3846004405807,323.86768229518907"
+              d="M 0,0 C 241.69230022029035 0,241.69230022029032 323.86768229518907,483.3846004405807 323.86768229518907"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -73,7 +73,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,116.9986221326244 L 232.14012327901673,0"
+              d="M 0,116.9986221326244 C 116.07006163950837 116.9986221326244,116.07006163950837 0,232.14012327901673 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -90,7 +90,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,83.2256106345452 L 231.1822517626254,0"
+              d="M 0,83.22561063454526 C 115.59112588131273 83.22561063454526,115.59112588131273 5.684341886080802e-14,231.1822517626254 5.684341886080802e-14"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -107,7 +107,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,49.7773823067389 L 230.4508440126803,0"
+              d="M 0,49.77738230673896 C 115.22542200634012 49.77738230673896,115.22542200634012 5.684341886080802e-14,230.4508440126803 5.684341886080802e-14"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -124,7 +124,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,16.563718030526047 L 230.0516393128617,0"
+              d="M 0,16.563718030526047 C 115.02581965643088 16.563718030526047,115.02581965643088 0,230.0516393128617 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -141,7 +141,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.0516393128617,16.563718030526047"
+              d="M 0,0 C 115.02581965643088 0,115.02581965643088 16.563718030526047,230.0516393128617 16.563718030526047"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -158,7 +158,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.4508440126803,49.7773823067389"
+              d="M 0,0 C 115.22542200634012 0,115.22542200634012 49.7773823067389,230.4508440126803 49.7773823067389"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -175,7 +175,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 231.1822517626254,83.2256106345452"
+              d="M 0,0 C 115.59112588131273 0,115.59112588131273 83.2256106345452,231.1822517626254 83.2256106345452"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -192,7 +192,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 232.14012327901673,116.9986221326244"
+              d="M 0,0 C 116.07006163950837 0,116.07006163950837 116.9986221326244,232.14012327901673 116.9986221326244"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -209,7 +209,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,117.94179092696967 L 232.16887977749934,0"
+              d="M 0,117.94179092696967 C 116.08443988874967 117.94179092696967,116.08443988874967 0,232.16887977749934 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -226,7 +226,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.11562945107312,24.852487980715892"
+              d="M 0,0 C 115.05781472553656 0,115.05781472553656 24.852487980715892,230.11562945107312 24.852487980715892"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -243,7 +243,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 232.16887977749934,117.94179092696967"
+              d="M 0,0 C 116.08443988874967 0,116.08443988874967 117.94179092696967,232.16887977749934 117.94179092696967"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -260,7 +260,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,83.22561063454515 L 231.1822517626254,0"
+              d="M 0,83.22561063454515 C 115.59112588131273 83.22561063454515,115.59112588131273 0,231.1822517626254 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -277,7 +277,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,49.77738230673896 L 230.4508440126803,0"
+              d="M 0,49.77738230673896 C 115.22542200634012 49.77738230673896,115.22542200634012 0,230.4508440126803 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -294,7 +294,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,16.563718030526047 L 230.0516393128617,0"
+              d="M 0,16.563718030526076 C 115.02581965643088 16.563718030526076,115.02581965643088 2.842170943040401e-14,230.0516393128617 2.842170943040401e-14"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -311,7 +311,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.0516393128617,16.563718030526047"
+              d="M 0,0 C 115.02581965643088 0,115.02581965643088 16.563718030526047,230.0516393128617 16.563718030526047"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -328,7 +328,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.4508440126803,49.77738230673893"
+              d="M 0,0 C 115.22542200634012 0,115.22542200634012 49.77738230673893,230.4508440126803 49.77738230673893"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -345,7 +345,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 231.1822517626254,83.22561063454518"
+              d="M 0,0 C 115.59112588131273 0,115.59112588131273 83.22561063454518,231.1822517626254 83.22561063454518"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -362,7 +362,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,16.563718030526054 L 230.0516393128617,0"
+              d="M 0,16.563718030526054 C 115.02581965643088 16.563718030526054,115.02581965643088 0,230.0516393128617 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -379,7 +379,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.0516393128617,16.563718030526058"
+              d="M 0,0 C 115.02581965643088 0,115.02581965643088 16.563718030526058,230.0516393128617 16.563718030526058"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -396,7 +396,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,33.14940334132888 L 230.2041898703394,0"
+              d="M 0,33.14940334132889 C 115.1020949351697 33.14940334132889,115.1020949351697 1.4210854715202004e-14,230.2041898703394 1.4210854715202004e-14"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -413,7 +413,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230,0"
+              d="M 0,0 C 115 0,115 0,230 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -430,7 +430,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.2041898703394,33.14940334132888"
+              d="M 0,0 C 115.1020949351697 0,115.1020949351697 33.14940334132888,230.2041898703394 33.14940334132888"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -447,7 +447,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,66.46497631393979 L 230.78116775673521,0"
+              d="M 0,66.46497631393979 C 115.39058387836764 66.46497631393979,115.39058387836764 0,230.78116775673521 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -464,7 +464,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,33.149403341328906 L 230.2041898703394,0"
+              d="M 0,33.149403341328934 C 115.1020949351697 33.149403341328934,115.1020949351697 2.842170943040401e-14,230.2041898703394 2.842170943040401e-14"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -481,7 +481,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230,0"
+              d="M 0,0 C 115 0,115 0,230 0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -498,7 +498,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.2041898703394,33.149403341328934"
+              d="M 0,0 C 115.1020949351697 0,115.1020949351697 33.149403341328934,230.2041898703394 33.149403341328934"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -515,7 +515,7 @@
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 230.78116775673521,66.46497631393981"
+              d="M 0,0 C 115.39058387836764 0,115.39058387836764 66.46497631393981,230.78116775673521 66.46497631393981"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg
index 8e41033de8f..ed13d8586f0 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,375,41.666668)">
+          <g transform="matrix(1,0,0,1,377.425354,51.368092)">
             <path
               id="key"
               fill="none"
-              d="M 0,333.3333320617676 L 83.33334350585938,0"
+              d="M 0,313.9304822025391 L 78.48263043042027,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,125)">
+          <g transform="matrix(1,0,0,1,46.138805,133.944275)">
             <path
               id="key"
               fill="none"
-              d="M 0,166.66665649414062 L 83.33333206176758,0"
+              d="M 0,148.77811283791684 L 74.38905982421937,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,50.241596,46.811626)">
             <path
               id="key"
               fill="none"
-              d="M 0,249.9999885559082 L 416.66667556762695,0"
+              d="M 0,239.7100739553365 L 399.5168167485888,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -69,11 +69,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,125)">
+          <g transform="matrix(1,0,0,1,132.071075,132.071075)">
             <path
               id="key"
               fill="none"
-              d="M 250,250 L 0,0"
+              d="M 235.85786437626905,235.85786437626905 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -86,11 +86,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,134.701431,44.092026)">
             <path
               id="key"
               fill="none"
-              d="M 333.3333435058594,0 L 0,83.33333206176758"
+              d="M 313.9304934507062,0 L 0,78.48261977002727"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -103,11 +103,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,291.666656)">
+          <g transform="matrix(1,0,0,1,51.368092,294.092010)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 333.3333320617676,83.33334350585938"
+              d="M 0,0 L 313.9304822025391,78.48263043042027"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -120,11 +120,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,291.666656)">
+          <g transform="matrix(1,0,0,1,301.666656,291.666656)">
             <path
               id="key"
               fill="none"
-              d="M 166.66668701171875,0 L 0,0"
+              d="M 146.66668701171875,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -137,11 +137,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,208.333328)">
+          <g transform="matrix(1,0,0,1,135,208.333328)">
             <path
               id="key"
               fill="none"
-              d="M 83.33332824707031,0 L 0,0"
+              d="M 63.33332824707031,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -154,11 +154,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,208.333328)">
+          <g transform="matrix(1,0,0,1,134.701431,210.758682)">
             <path
               id="key"
               fill="none"
-              d="M 333.3333435058594,83.33332824707031 L 0,0"
+              d="M 313.9304933984596,78.48261616431637 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -171,11 +171,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,208.333328)">
+          <g transform="matrix(1,0,0,1,215.404404,215.404404)">
             <path
               id="key"
               fill="none"
-              d="M 83.33332824707031,83.33332824707031 L 0,0"
+              d="M 69.19119262333936,69.19119262333936 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -188,11 +188,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,208.333328)">
+          <g transform="matrix(1,0,0,1,133.944275,212.805466)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 166.66665649414062,83.33332824707031"
+              d="M 0,0 L 148.77811267414233,74.38905633707114"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -205,11 +205,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,208.333328)">
+          <g transform="matrix(1,0,0,1,217.820160,211.495605)">
             <path
               id="key"
               fill="none"
-              d="M 250.00001525878906,83.33332824707031 L 0,0"
+              d="M 231.02634906616666,77.00877362156993 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -222,11 +222,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,41.666668)">
+          <g transform="matrix(1,0,0,1,296.138794,50.610939)">
             <path
               id="key"
               fill="none"
-              d="M 83.33334350585938,166.6666603088379 L 0,0"
+              d="M 74.38907044943869,148.7781170620504 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -239,11 +239,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,125)">
+          <g transform="matrix(1,0,0,1,213.880325,133.320496)">
             <path
               id="key"
               fill="none"
-              d="M 0,250 L 166.6666717529297,0"
+              d="M 0,233.35899426950255 L 155.57266759403592,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -256,11 +256,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,375,125)">
+          <g transform="matrix(1,0,0,1,375,135)">
             <path
               id="key"
               fill="none"
-              d="M 0,83.33332824707031 L 0,0"
+              d="M 0,63.33332824707031 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -273,11 +273,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,41.666668)">
+          <g transform="matrix(1,0,0,1,210.758682,51.368092)">
             <path
               id="key"
               fill="none"
-              d="M 0,333.3333320617676 L 83.33332824707031,0"
+              d="M 0,313.9304819935527 L 78.48261600757658,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -290,11 +290,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,41.666668)">
+          <g transform="matrix(1,0,0,1,298.737732,48.737736)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 83.33334350585938,83.33333206176758"
+              d="M 0,0 L 69.19120691106514,69.1911974091"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -307,11 +307,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,208.333328)">
+          <g transform="matrix(1,0,0,1,215.404404,215.404404)">
             <path
               id="key"
               fill="none"
-              d="M 166.6666717529297,0 L 0,166.6666717529297"
+              d="M 152.52453612919874,0 L 0,152.52453612919874"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -324,11 +324,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,125)">
+          <g transform="matrix(1,0,0,1,208.333328,135)">
             <path
               id="key"
               fill="none"
-              d="M 0,166.66665649414062 L 0,0"
+              d="M 0,146.66665649414062 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -341,11 +341,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,44.092026,51.368092)">
             <path
               id="key"
               fill="none"
-              d="M 0,333.3333320617676 L 83.33333206176758,0"
+              d="M 0,313.9304820457993 L 78.48261961328751,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -358,11 +358,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,132.071060,48.737736)">
             <path
               id="key"
               fill="none"
-              d="M 83.33332824707031,83.33333206176758 L 0,0"
+              d="M 69.19119294702716,69.19119611434883 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -375,11 +375,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,291.666656)">
+          <g transform="matrix(1,0,0,1,50.610939,296.138794)">
             <path
               id="key"
               fill="none"
-              d="M 166.6666603088379,0 L 0,83.33334350585938"
+              d="M 148.7781170620504,0 L 0,74.38907044943869"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -392,11 +392,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,125)">
+          <g transform="matrix(1,0,0,1,47.213669,133.320496)">
             <path
               id="key"
               fill="none"
-              d="M 0,250 L 166.6666603088379,0"
+              d="M 0,233.35899391791884 L 155.5726566773198,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -409,11 +409,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,128.162277,51.153500)">
             <path
               id="key"
               fill="none"
-              d="M 83.33332824707031,249.9999885559082 L 0,0"
+              d="M 77.0087730135881,231.02632256594643 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -426,11 +426,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,208.333328)">
+          <g transform="matrix(1,0,0,1,50.241596,213.478287)">
             <path
               id="key"
               fill="none"
-              d="M 416.66667556762695,0 L 0,250.00001525878906"
+              d="M 399.5168172334777,0 L 0,239.71009985006924"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -443,11 +443,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,41.666668)">
+          <g transform="matrix(1,0,0,1,296.138794,50.610939)">
             <path
               id="key"
               fill="none"
-              d="M 0,166.6666603088379 L 83.33334350585938,0"
+              d="M 0,148.7781170620504 L 74.38907044943869,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -460,11 +460,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,375,41.666668)">
+          <g transform="matrix(1,0,0,1,379.472137,50.610939)">
             <path
               id="key"
               fill="none"
-              d="M 83.33334350585938,166.6666603088379 L 0,0"
+              d="M 74.38907044943869,148.7781170620504 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -477,11 +477,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,208.333328)">
+          <g transform="matrix(1,0,0,1,48.737736,215.404404)">
             <path
               id="key"
               fill="none"
-              d="M 0,250.00001525878906 L 249.9999885559082,0"
+              d="M 0,235.85787887978663 L 235.85785368744882,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -494,11 +494,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,47.913620,49.475357)">
             <path
               id="key"
               fill="none"
-              d="M 0,416.66667556762695 L 333.3333320617676,0"
+              d="M 0,401.0492992253229 L 320.8394313024834,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -511,11 +511,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,208.333328)">
+          <g transform="matrix(1,0,0,1,301.666656,208.333328)">
             <path
               id="key"
               fill="none"
-              d="M 166.66668701171875,0 L 0,0"
+              d="M 146.66668701171875,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -528,11 +528,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,208.333328)">
+          <g transform="matrix(1,0,0,1,48.737736,215.404388)">
             <path
               id="key"
               fill="none"
-              d="M 83.33333206176758,83.33332824707031 L 0,0"
+              d="M 69.19119611434883,69.19119294702716 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -545,11 +545,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,125)">
+          <g transform="matrix(1,0,0,1,50.610939,129.472137)">
             <path
               id="key"
               fill="none"
-              d="M 333.3333320617676,166.66665649414062 L 0,0"
+              d="M 315.4447880370511,157.72238499357775 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -562,11 +562,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,208.333328)">
+          <g transform="matrix(1,0,0,1,51.368092,210.758682)">
             <path
               id="key"
               fill="none"
-              d="M 333.3333320617676,83.33332824707031 L 0,0"
+              d="M 313.9304819935527,78.48261600757658 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -579,11 +579,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,125)">
+          <g transform="matrix(1,0,0,1,46.138805,133.944275)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 83.33333206176758,166.66665649414062"
+              d="M 0,0 L 74.38905982421937,148.77811283791684"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -596,11 +596,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,291.666656)">
+          <g transform="matrix(1,0,0,1,135,291.666656)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 250,0"
+              d="M 0,0 L 230,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -613,11 +613,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,125)">
+          <g transform="matrix(1,0,0,1,41.666668,135)">
             <path
               id="key"
               fill="none"
-              d="M 0,83.33332824707031 L 0,0"
+              d="M 0,63.33332824707031 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -630,11 +630,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,44.092026,51.368092)">
             <path
               id="key"
               fill="none"
-              d="M 83.33333206176758,333.3333320617676 L 0,0"
+              d="M 78.48261961328751,313.9304820457993 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -647,11 +647,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,126.961159,51.472473)">
             <path
               id="key"
               fill="none"
-              d="M 0,416.66667556762695 L 83.33332824707031,0"
+              d="M 0,397.05506199165677 L 79.4110058550657,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -664,11 +664,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,43.627831,51.472473)">
             <path
               id="key"
               fill="none"
-              d="M 83.33333206176758,416.66667556762695 L 0,0"
+              d="M 79.41100949711904,397.0550620261855 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -681,11 +681,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,127.425354,51.368092)">
             <path
               id="key"
               fill="none"
-              d="M 0,333.3333320617676 L 83.33332824707031,0"
+              d="M 0,313.9304819935527 L 78.48261600757661,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -698,11 +698,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,51.666668,41.666668)">
             <path
               id="key"
               fill="none"
-              d="M 166.6666603088379,0 L 0,0"
+              d="M 146.6666603088379,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -715,11 +715,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,375)">
+          <g transform="matrix(1,0,0,1,125,385)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 0,83.33334350585938"
+              d="M 0,0 L 0,63.333343505859375"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -732,11 +732,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,125)">
+          <g transform="matrix(1,0,0,1,301.666656,125)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 166.66668701171875,0"
+              d="M 0,0 L 146.66668701171875,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -749,11 +749,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,375)">
+          <g transform="matrix(1,0,0,1,301.666656,375)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 166.66668701171875,0"
+              d="M 0,0 L 146.66668701171875,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -766,11 +766,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,458.333344,125)">
+          <g transform="matrix(1,0,0,1,458.333344,135)">
             <path
               id="key"
               fill="none"
-              d="M 0,250 L 0,0"
+              d="M 0,230 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -783,11 +783,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,125)">
+          <g transform="matrix(1,0,0,1,291.666656,135)">
             <path
               id="key"
               fill="none"
-              d="M 0,250 L 0,0"
+              d="M 0,230 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -800,11 +800,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,125)">
+          <g transform="matrix(1,0,0,1,297.213654,133.320496)">
             <path
               id="key"
               fill="none"
-              d="M 166.66668701171875,0 L 0,250"
+              d="M 155.57268214965757,0 L 0,233.3589947382809"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -817,11 +817,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,291.666656,125)">
+          <g transform="matrix(1,0,0,1,297.213654,133.320496)">
             <path
               id="key"
               fill="none"
-              d="M 166.66668701171875,250 L 0,0"
+              d="M 155.57268214965757,233.3589947382809 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -834,11 +834,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,125)">
+          <g transform="matrix(1,0,0,1,125,135)">
             <path
               id="key"
               fill="none"
-              d="M 0,83.33332824707031 L 0,0"
+              d="M 0,63.33332824707031 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -851,11 +851,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,41.666668)">
+          <g transform="matrix(1,0,0,1,215.404388,48.737736)">
             <path
               id="key"
               fill="none"
-              d="M 0,83.33333206176758 L 83.33332824707031,0"
+              d="M 0,69.19119611434883 L 69.19119294702716,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -868,11 +868,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,41.666668)">
+          <g transform="matrix(1,0,0,1,216.653824,47.213669)">
             <path
               id="key"
               fill="none"
-              d="M 0,166.6666603088379 L 250.00001525878906,0"
+              d="M 0,155.5726571460981 L 233.35900886418904,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -885,11 +885,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,134.486832,44.828945)">
             <path
               id="key"
               fill="none"
-              d="M 250,83.33333206176758 L 0,0"
+              d="M 231.02633401003823,77.00877682828536 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -902,11 +902,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,50.610939,46.138805)">
             <path
               id="key"
               fill="none"
-              d="M 0,166.6666603088379 L 333.3333320617676,0"
+              d="M 0,157.72238864450048 L 315.4447881189384,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -919,11 +919,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,51.472473,43.627831)">
             <path
               id="key"
               fill="none"
-              d="M 416.66667556762695,83.33333206176758 L 0,0"
+              d="M 397.0550620261855,79.41100949711904 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -936,11 +936,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,125)">
+          <g transform="matrix(1,0,0,1,51.153500,128.162277)">
             <path
               id="key"
               fill="none"
-              d="M 249.9999885559082,83.33332824707031 L 0,0"
+              d="M 231.02632256594643,77.0087730135881 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -953,11 +953,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,208.333328,41.666668)">
+          <g transform="matrix(1,0,0,1,215.404388,48.737736)">
             <path
               id="key"
               fill="none"
-              d="M 83.33332824707031,83.33333206176758 L 0,0"
+              d="M 69.19119294702716,69.19119611434883 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -970,11 +970,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,133.944275,46.138805)">
             <path
               id="key"
               fill="none"
-              d="M 0,83.33333206176758 L 166.66665649414062,0"
+              d="M 0,74.38905982421937 L 148.77811283791684,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -987,11 +987,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,51.666668,41.666668)">
             <path
               id="key"
               fill="none"
-              d="M 333.3333320617676,0 L 0,0"
+              d="M 313.3333320617676,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1004,11 +1004,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,135,41.666668)">
             <path
               id="key"
               fill="none"
-              d="M 333.3333435058594,0 L 0,0"
+              d="M 313.3333435058594,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1021,11 +1021,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,50.610939,46.138805)">
             <path
               id="key"
               fill="none"
-              d="M 0,83.33333206176758 L 166.6666603088379,0"
+              d="M 0,74.3890599879939 L 148.7781165707268,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1038,11 +1038,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,51.666668,41.666668)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 249.9999885559082,0"
+              d="M 0,0 L 229.9999885559082,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1055,11 +1055,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,135,41.666668)">
             <path
               id="key"
               fill="none"
-              d="M 83.33332824707031,0 L 0,0"
+              d="M 63.33332824707031,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1072,11 +1072,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,41.666668,41.666668)">
+          <g transform="matrix(1,0,0,1,51.666668,41.666668)">
             <path
               id="key"
               fill="none"
-              d="M 166.6666603088379,0 L 0,0"
+              d="M 146.6666603088379,0 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1089,11 +1089,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,125,41.666668)">
+          <g transform="matrix(1,0,0,1,135,41.666668)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 166.66665649414062,0"
+              d="M 0,0 L 146.66665649414062,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/graph-element.svg b/packages/g6/__tests__/integration/snapshots/static/graph-element.svg
index 23e1433fa86..6c48a3e9266 100644
--- a/packages/g6/__tests__/integration/snapshots/static/graph-element.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/graph-element.svg
@@ -18,11 +18,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,238.408401,267.466034)">
+          <g transform="matrix(1,0,0,1,246.245651,273.677124)">
             <path
               id="key"
               fill="none"
-              d="M 51.29087829589844,0 L 0,40.648468017578125"
+              d="M 35.61638716424511,0 L 0,28.226297202309183"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -35,11 +35,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,289.699280,208.535919)">
+          <g transform="matrix(1,0,0,1,292.727661,218.066345)">
             <path
               id="key"
               fill="none"
-              d="M 0,58.93011474609375 L 18.725555419921875,0"
+              d="M 0,39.86927021565427 L 12.668806639725062,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -52,11 +52,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,289.699280,263.386993)">
+          <g transform="matrix(1,0,0,1,299.670929,264.139618)">
             <path
               id="key"
               fill="none"
-              d="M 0,4.07904052734375 L 54.0443115234375,0"
+              d="M 0,2.5738047395758485 L 34.101035332620086,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -69,11 +69,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,225.349884,234.997864)">
+          <g transform="matrix(1,0,0,1,234.277817,239.502548)">
             <path
               id="key"
               fill="none"
-              d="M 64.34939575195312,32.468170166015625 L 0,0"
+              d="M 46.4935439661881,23.458810754559522 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -86,11 +86,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,289.699280,237.901932)">
+          <g transform="matrix(1,0,0,1,296.865631,244.876404)">
             <path
               id="key"
               fill="none"
-              d="M 0,29.564102172851562 L 30.377532958984375,0"
+              d="M 0,15.615165033847006 L 16.044802839007275,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -103,11 +103,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,286.788239,188.195465)">
+          <g transform="matrix(1,0,0,1,287.155212,198.188736)">
             <path
               id="key"
               fill="none"
-              d="M 2.911041259765625,79.27056884765625 L 0,0"
+              d="M 2.1770789792049072,59.2840409007938 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -120,11 +120,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,289.699280,267.466034)">
+          <g transform="matrix(1,0,0,1,293.204285,276.831665)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 20.901519775390625,55.850372314453125"
+              d="M 0,0 L 13.891510679878024,37.119121088738666"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -137,11 +137,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,223.243683,267.466034)">
+          <g transform="matrix(1,0,0,1,232.732117,270.623505)">
             <path
               id="key"
               fill="none"
-              d="M 66.45559692382812,0 L 0,22.114410400390625"
+              d="M 47.478724720867035,0 L 0,15.79948194533415"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -154,11 +154,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,258.845642,256.749054)">
+          <g transform="matrix(1,0,0,1,268.292023,260.030243)">
             <path
               id="key"
               fill="none"
-              d="M 30.8536376953125,10.71697998046875 L 0,0"
+              d="M 11.960906669478277,4.154608885698053 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -171,11 +171,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,229.434891,267.466034)">
+          <g transform="matrix(1,0,0,1,235.711823,275.250641)">
             <path
               id="key"
               fill="none"
-              d="M 60.26438903808594,0 L 0,74.7393798828125"
+              d="M 47.710514477864194,0 L 0,59.17017201837007"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -188,11 +188,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,289.699280,205.511276)">
+          <g transform="matrix(1,0,0,1,295.070679,213.946198)">
             <path
               id="key"
               fill="none"
-              d="M 0,61.95475769042969 L 39.453155517578125,0"
+              d="M 0,45.08490816522476 L 28.71033572960141,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -205,11 +205,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,251.415207,267.466034)">
+          <g transform="matrix(1,0,0,1,256.847076,275.862152)">
             <path
               id="key"
               fill="none"
-              d="M 38.28407287597656,0 L 0,59.1763916015625"
+              d="M 27.42035417012505,0 L 0,42.38414291712081"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -222,11 +222,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,263.258881,213.396790)">
+          <g transform="matrix(1,0,0,1,267.651855,222.380203)">
             <path
               id="key"
               fill="none"
-              d="M 26.440399169921875,54.069244384765625 L 0,0"
+              d="M 17.65444089179448,36.10241558458486 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -239,11 +239,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,280.756714,267.466034)">
+          <g transform="matrix(1,0,0,1,283.302429,277.136566)">
             <path
               id="key"
               fill="none"
-              d="M 8.94256591796875,0 L 0,33.97064208984375"
+              d="M 3.851143392898166,0 L 0,14.629561027214322"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -256,11 +256,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,308.424835,208.535919)">
+          <g transform="matrix(1,0,0,1,313.838623,216.943710)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 35.318756103515625,54.85107421875"
+              d="M 0,0 L 24.491166512846917,38.035506917702946"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -273,11 +273,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,225.349884,234.997864)">
+          <g transform="matrix(1,0,0,1,235.345184,235.304291)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 94.7269287109375,2.9040679931640625"
+              d="M 0,0 L 74.73632076631873,2.291210746699221"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -290,11 +290,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,225.349884,234.997864)">
+          <g transform="matrix(1,0,0,1,232.689957,241.789276)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 49.1884765625,45.51165771484375"
+              d="M 0,0 L 34.508320303415985,31.92883723421906"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -307,11 +307,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,274.538361,237.901932)">
+          <g transform="matrix(1,0,0,1,281.840515,244.734116)">
             <path
               id="key"
               fill="none"
-              d="M 45.5384521484375,0 L 0,42.60758972167969"
+              d="M 30.934160251457115,0 L 0,28.94323250343507"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -324,11 +324,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,286.788239,188.195465)">
+          <g transform="matrix(1,0,0,1,296.044861,191.978989)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 42.36419677734375,17.315811157226562"
+              d="M 0,0 L 23.850961862401277,9.748768605201633"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -341,11 +341,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,251.415207,323.316406)">
+          <g transform="matrix(1,0,0,1,261.399445,323.877472)">
             <path
               id="key"
               fill="none"
-              d="M 59.18559265136719,0 L 0,3.326019287109375"
+              d="M 39.21709844120903,0 L 0,2.2038611080279225"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -358,11 +358,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,223.243683,256.749054)">
+          <g transform="matrix(1,0,0,1,230.595001,263.528290)">
             <path
               id="key"
               fill="none"
-              d="M 0,32.831390380859375 L 35.601959228515625,0"
+              d="M 0,19.27291557083015 L 20.899314540371847,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -375,11 +375,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,256.749054)">
+          <g transform="matrix(1,0,0,1,208.564194,258.934082)">
             <path
               id="key"
               fill="none"
-              d="M 60.03981018066406,0 L 0,13.44366455078125"
+              d="M 40.52308016537103,0 L 0,9.073624561243378"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -392,11 +392,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,251.415207,256.749054)">
+          <g transform="matrix(1,0,0,1,252.472366,266.693024)">
             <path
               id="key"
               fill="none"
-              d="M 7.4304351806640625,0 L 0,69.89337158203125"
+              d="M 5.3161293137818575,0 L 0,50.00544281352279"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -409,11 +409,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,258.845642,188.804016)">
+          <g transform="matrix(1,0,0,1,259.413086,198.787903)">
             <path
               id="key"
               fill="none"
-              d="M 0,67.94503784179688 L 3.86163330078125,0"
+              d="M 0,47.97726158515928 L 2.726771474451539,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -426,11 +426,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,258.845642,256.749054)">
+          <g transform="matrix(1,0,0,1,259.577820,266.722198)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 3.922454833984375,53.42864990234375"
+              d="M 0,0 L 2.458099331453468,33.4823303680987"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -443,11 +443,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,258.845642,245.735092)">
+          <g transform="matrix(1,0,0,1,268.100159,249.523743)">
             <path
               id="key"
               fill="none"
-              d="M 0,11.013961791992188 L 26.903717041015625,0"
+              d="M 0,3.4366518208672687 L 8.394682122860331,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -460,11 +460,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,227.077484,191.237976)">
+          <g transform="matrix(1,0,0,1,231.440796,200.235840)">
             <path
               id="key"
               fill="none"
-              d="M 31.768157958984375,65.51107788085938 L 0,0"
+              d="M 23.041528828836363,47.51535772230915 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -477,11 +477,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,229.434891,310.177704)">
+          <g transform="matrix(1,0,0,1,236.645752,317.106140)">
             <path
               id="key"
               fill="none"
-              d="M 0,32.0277099609375 L 33.33320617675781,0"
+              d="M 0,18.17080824514653 L 18.91147691709864,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -494,11 +494,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,270.192719)">
+          <g transform="matrix(1,0,0,1,202.719803,279.394928)">
             <path
               id="key"
               fill="none"
-              d="M 30.629058837890625,72.0126953125 L 0,0"
+              d="M 22.801123887290316,53.608254695921346 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -511,11 +511,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,229.434891,326.642426)">
+          <g transform="matrix(1,0,0,1,237.596252,332.421021)">
             <path
               id="key"
               fill="none"
-              d="M 0,15.56298828125 L 21.980316162109375,0"
+              d="M 0,4.005807629756077 L 5.657584301641407,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -528,11 +528,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,262.707275,188.804016)">
+          <g transform="matrix(1,0,0,1,272.405396,191.242554)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 66.44515991210938,16.707260131835938"
+              d="M 0,0 L 47.048919585856424,11.830185065134856"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -545,11 +545,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,225.676025,255.569672)">
+          <g transform="matrix(1,0,0,1,233.360535,261.968750)">
             <path
               id="key"
               fill="none"
-              d="M 55.0806884765625,45.86700439453125 L 0,0"
+              d="M 39.711657270580275,33.06884516011223 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -562,11 +562,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,280.756714,231.754700)">
+          <g transform="matrix(1,0,0,1,283.425201,241.392075)">
             <path
               id="key"
               fill="none"
-              d="M 0,69.68197631835938 L 19.29425048828125,0"
+              d="M 0,50.40721248622617 L 13.95725889980281,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -579,11 +579,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,280.756714,245.735092)">
+          <g transform="matrix(1,0,0,1,281.649445,255.695160)">
             <path
               id="key"
               fill="none"
-              d="M 0,55.70158386230469 L 4.992645263671875,0"
+              d="M 0,35.78144198729049 L 3.207162785654532,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -596,11 +596,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,270.192719)">
+          <g transform="matrix(1,0,0,1,208.149780,273.755127)">
             <path
               id="key"
               fill="none"
-              d="M 81.95088195800781,31.24395751953125 L 0,0"
+              d="M 63.26299212760168,24.119157614509163 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -613,11 +613,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,225.676025,231.754700)">
+          <g transform="matrix(1,0,0,1,235.199707,234.804199)">
             <path
               id="key"
               fill="none"
-              d="M 0,23.814971923828125 L 74.37493896484375,0"
+              d="M 0,17.715974808720944 L 55.327570795201154,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -630,11 +630,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,225.676025,191.237976)">
+          <g transform="matrix(1,0,0,1,225.893829,201.235611)">
             <path
               id="key"
               fill="none"
-              d="M 0,64.33169555664062 L 1.401458740234375,0"
+              d="M 0,44.33643968126785 L 0.9658643436108605,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -647,11 +647,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,242.694702,231.754700)">
+          <g transform="matrix(1,0,0,1,252.440018,233.997208)">
             <path
               id="key"
               fill="none"
-              d="M 57.35626220703125,0 L 0,13.19830322265625"
+              d="M 37.865630908967546,0 L 0,8.713295797585516"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -664,11 +664,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,227.077484,191.237976)">
+          <g transform="matrix(1,0,0,1,229.869293,200.840363)">
             <path
               id="key"
               fill="none"
-              d="M 15.617218017578125,53.71502685546875 L 0,0"
+              d="M 10.033584618461532,34.510260830747995 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -681,11 +681,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,171.254074,229.676056)">
+          <g transform="matrix(1,0,0,1,181.032990,231.767197)">
             <path
               id="key"
               fill="none"
-              d="M 71.44062805175781,15.276947021484375 L 0,0"
+              d="M 51.8828002353568,11.094678366315122 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -698,11 +698,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,244.953003)">
+          <g transform="matrix(1,0,0,1,207.474579,249.938248)">
             <path
               id="key"
               fill="none"
-              d="M 43.88887023925781,0 L 0,25.239715576171875"
+              d="M 26.55136133956529,0 L 0,15.269219843607601"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -715,11 +715,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,231.194992,171.388657)">
+          <g transform="matrix(1,0,0,1,232.739456,181.268661)">
             <path
               id="key"
               fill="none"
-              d="M 11.499710083007812,73.56434631347656 L 0,0"
+              d="M 8.410787776521943,53.80432204768948 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -732,11 +732,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,227.077484,191.237976)">
+          <g transform="matrix(1,0,0,1,234.404419,198.043564)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 58.671875,54.49711608886719"
+              d="M 0,0 L 44.01800905081532,40.88593639189287"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -749,11 +749,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,245.735092)">
+          <g transform="matrix(1,0,0,1,208.432205,248.443039)">
             <path
               id="key"
               fill="none"
-              d="M 86.94352722167969,0 L 0,24.457626342773438"
+              d="M 67.69078312508103,0 L 0,19.041738165301012"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -766,11 +766,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,270.192719)">
+          <g transform="matrix(1,0,0,1,207.285309,275.493530)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 63.96226501464844,39.9849853515625"
+              d="M 0,0 L 47.003320214832,29.383372678163255"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -783,11 +783,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,140.767929,268.551514)">
+          <g transform="matrix(1,0,0,1,150.763931,268.834167)">
             <path
               id="key"
               fill="none"
-              d="M 58.03790283203125,1.641204833984375 L 0,0"
+              d="M 38.04589458008985,1.075867718356676 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -800,11 +800,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,270.192719)">
+          <g transform="matrix(1,0,0,1,208.048477,274.010254)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 48.7327880859375,20.128326416015625"
+              d="M 0,0 L 30.247501485533576,12.493263921122207"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -817,11 +817,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,171.388657)">
+          <g transform="matrix(1,0,0,1,201.920853,180.891113)">
             <path
               id="key"
               fill="none"
-              d="M 0,98.80406188964844 L 32.38916015625,0"
+              d="M 0,79.79915139806096 L 26.159121857270804,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -834,11 +834,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,191.807495,198.103271)">
+          <g transform="matrix(1,0,0,1,192.773743,208.056488)">
             <path
               id="key"
               fill="none"
-              d="M 6.9983367919921875,72.08944702148438 L 0,0"
+              d="M 5.065851150217895,52.18302847759921 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -851,11 +851,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,175.756622,210.033966)">
+          <g transform="matrix(1,0,0,1,179.334412,219.372025)">
             <path
               id="key"
               fill="none"
-              d="M 23.049209594726562,60.15875244140625 L 0,0"
+              d="M 15.893641594087569,41.48262204487517 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -868,11 +868,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,198.805832,224.012451)">
+          <g transform="matrix(1,0,0,1,205.642059,231.310806)">
             <path
               id="key"
               fill="none"
-              d="M 0,46.180267333984375 L 43.25611877441406,0"
+              d="M 0,31.583550217949522 L 29.58367022141323,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -885,11 +885,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,155.983582,270.192719)">
+          <g transform="matrix(1,0,0,1,164.266037,275.796387)">
             <path
               id="key"
               fill="none"
-              d="M 42.82225036621094,0 L 0,28.972259521484375"
+              d="M 26.257348110806106,0 L 0,17.764939892381108"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -902,11 +902,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,171.254074,229.676056)">
+          <g transform="matrix(1,0,0,1,176.877228,237.945282)">
             <path
               id="key"
               fill="none"
-              d="M 27.5517578125,40.51666259765625 L 0,0"
+              d="M 16.305438130624964,23.978213649430472 L 0,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -919,11 +919,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,191.807495,171.388657)">
+          <g transform="matrix(1,0,0,1,200.083481,177.001862)">
             <path
               id="key"
               fill="none"
-              d="M 39.38749694824219,0 L 0,26.714614868164062"
+              d="M 22.835518702352488,0 L 0,15.488216685862028"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -936,11 +936,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,221.934402,171.388657)">
+          <g transform="matrix(1,0,0,1,224.026993,181.167267)">
             <path
               id="key"
               fill="none"
-              d="M 9.260589599609375,0 L 0,43.27449035644531"
+              d="M 5.075415833079262,0 L 0,23.717283998073242"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -953,11 +953,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,231.194992,171.388657)">
+          <g transform="matrix(1,0,0,1,239.352875,177.172165)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 51.23918151855469,36.325927734375"
+              d="M 0,0 L 34.923425461929156,24.758901137159626"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -970,11 +970,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,175.756622,171.388657)">
+          <g transform="matrix(1,0,0,1,183.960159,177.107224)">
             <path
               id="key"
               fill="none"
-              d="M 55.43836975097656,0 L 0,38.64530944824219"
+              d="M 39.031301320875286,0 L 0,27.208172327005343"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -987,11 +987,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,231.194992,171.388657)">
+          <g transform="matrix(1,0,0,1,233.217346,181.182022)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 10.866958618164062,52.62379455566406"
+              d="M 0,0 L 6.8222433775148374,33.03705724129594"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1004,11 +1004,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,171.254074,171.388657)">
+          <g transform="matrix(1,0,0,1,178.423340,178.360153)">
             <path
               id="key"
               fill="none"
-              d="M 59.94091796875,0 L 0,58.28739929199219"
+              d="M 45.60239539517812,0 L 0,44.34441645447964"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
@@ -1021,11 +1021,11 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,155.983582,229.676056)">
+          <g transform="matrix(1,0,0,1,158.129913,239.443008)">
             <path
               id="key"
               fill="none"
-              d="M 0,69.48892211914062 L 15.270492553710938,0"
+              d="M 0,49.95502636544995 L 10.977834090247256,0"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/unit/registry.spec.ts b/packages/g6/__tests__/unit/registry.spec.ts
index 467aeebef69..9b809faed10 100644
--- a/packages/g6/__tests__/unit/registry.spec.ts
+++ b/packages/g6/__tests__/unit/registry.spec.ts
@@ -1,5 +1,17 @@
 import { pick } from '@antv/util';
-import { Circle, Cubic, Ellipse, Line, Polyline, Quadratic, Rect, Star, Triangle } from '../../src/elements';
+import {
+  Circle,
+  Cubic,
+  CubicHorizontal,
+  CubicVertical,
+  Ellipse,
+  Line,
+  Polyline,
+  Quadratic,
+  Rect,
+  Star,
+  Triangle,
+} from '../../src/elements';
 import { getPlugin, getPlugins, register, registerBuiltInPlugins } from '../../src/registry';
 import { dark, light } from '../../src/themes';
 
@@ -19,6 +31,8 @@ describe('registry', () => {
       line: Line,
       polyline: Polyline,
       quadratic: Quadratic,
+      'cubic-horizontal': CubicHorizontal,
+      'cubic-vertical': CubicVertical,
     });
     expect(getPlugins('combo')).toEqual({});
     expect(getPlugins('theme')).toEqual({
diff --git a/packages/g6/__tests__/unit/runtime/element.spec.ts b/packages/g6/__tests__/unit/runtime/element.spec.ts
index 5a21516d8b6..28ca03010e2 100644
--- a/packages/g6/__tests__/unit/runtime/element.spec.ts
+++ b/packages/g6/__tests__/unit/runtime/element.spec.ts
@@ -157,8 +157,6 @@ describe('ElementController', () => {
 
     expect(omit(elementController.getElementComputedStyle('edge', edge1Id), ['sourceNode', 'targetNode'])).toEqual({
       ...LIGHT_THEME.edge?.style,
-      sourcePoint: [0, 0, 0],
-      targetPoint: [0, 0, 0],
       color: BUILT_IN_PALETTES.oranges.at(-1),
     });
 
@@ -168,12 +166,6 @@ describe('ElementController', () => {
       ...LIGHT_THEME.edge?.state?.selected,
       lineWidth: 4,
       stroke: 'red',
-      // 在运行时环境测试 / Test in runtime environment
-      sourceNode: undefined,
-      targetNode: undefined,
-      // 暂未实现 / Not implemented yet
-      sourcePoint: [0, 0, 0],
-      targetPoint: [0, 0, 0],
       color: BUILT_IN_PALETTES.oranges.at(-2),
     });
 
diff --git a/packages/g6/__tests__/unit/utils/point.spec.ts b/packages/g6/__tests__/unit/utils/point.spec.ts
index e045e69bd16..3d6393b4ae3 100644
--- a/packages/g6/__tests__/unit/utils/point.spec.ts
+++ b/packages/g6/__tests__/unit/utils/point.spec.ts
@@ -129,6 +129,22 @@ describe('Point Functions', () => {
       },
     });
     expect(getEllipseIntersectPoint([110, 100], circle.getBounds())).toEqual([101, 100]);
+
+    const circle2 = new Circle({
+      style: {
+        r: 20,
+      },
+    });
+    expect(getEllipseIntersectPoint([0, 0], circle2.getBounds())).toEqual([0, 0, 0]);
+
+    const circle3 = new Circle({
+      style: {
+        cx: 100,
+        cy: 100,
+        r: 20,
+      },
+    });
+    expect(getEllipseIntersectPoint([100, 100], circle3.getBounds())).toEqual([100, 100, 0]);
   });
 
   it('findNearestPoints', () => {
diff --git a/packages/g6/src/animations/executor.ts b/packages/g6/src/animations/executor.ts
index 7855d2368e9..c848e9ab74a 100644
--- a/packages/g6/src/animations/executor.ts
+++ b/packages/g6/src/animations/executor.ts
@@ -15,13 +15,13 @@ const DEFAULT_ANIMATION_OPTIONS: KeyframeAnimationOptions = {
  * <zh/> 动画 Spec 执行器
  *
  * <en/> Animation Spec Executor
- * @param shape - <zh/> 要执行动画的图形 | <en/> shape to execute animation
+ * @param element - <zh/> 要执行动画的图形 | <en/> shape to execute animation
  * @param animation - <zh/> 动画 Spec | <en/> animation specification
  * @param commonEffectTiming - <zh/> 动画公共配置 | <en/> common animation configuration
  * @param context - <zh/> 动画执行上下文 | <en/> animation execution context
  * @returns <zh/> 动画实例 | <en/> animation instance
  */
-export const executor: AnimationExecutor = (shape, animation, commonEffectTiming, context) => {
+export const executor: AnimationExecutor = (element, animation, commonEffectTiming, context) => {
   if (!animation) return null;
 
   const { animationsFilter = () => true } = context;
@@ -42,21 +42,21 @@ export const executor: AnimationExecutor = (shape, animation, commonEffectTiming
    */
   const getKeyframeStyle = (shapeID?: string) => {
     if (shapeID) {
-      const target = shape.getElementById(shapeID) as DisplayObject;
-      const name = `get${upperFirst(shapeID)}Style` as keyof typeof shape;
+      const shape = element.getElementById(shapeID) as DisplayObject;
+      const name = `get${upperFirst(shapeID)}Style` as keyof typeof element;
 
-      const caller: (attrs?: Record<string, unknown>) => Record<string, unknown> =
-        shape?.[name]?.bind(shape) || ((attrs) => attrs);
+      const styler: (attrs?: Record<string, unknown>) => Record<string, unknown> =
+        element?.[name]?.bind(element) || ((attrs) => attrs);
 
-      const fromStyle = caller?.(originalStyle) || {};
-      const toStyle = caller?.() || {};
+      const fromStyle = styler?.({ ...element.attributes, ...originalStyle }) || {};
+      const toStyle = { ...shape.attributes };
 
-      return { target, fromStyle, toStyle };
+      return { shape, fromStyle, toStyle };
     } else {
-      const target = shape;
+      const shape = element;
       const fromStyle = originalStyle;
-      const toStyle = { ...target.attributes, ...modifiedStyle };
-      return { target, fromStyle, toStyle };
+      const toStyle = { ...shape.attributes, ...modifiedStyle };
+      return { shape, fromStyle, toStyle };
     }
   };
 
@@ -65,9 +65,9 @@ export const executor: AnimationExecutor = (shape, animation, commonEffectTiming
   const results = animations
     .map(({ fields, shape: shapeID, states: enabledStates, ...individualEffectTiming }) => {
       if (enabledStates === undefined || enabledStates?.some((state) => states.includes(state))) {
-        const { target, fromStyle, toStyle } = getKeyframeStyle(shapeID);
+        const { shape, fromStyle, toStyle } = getKeyframeStyle(shapeID);
 
-        if (!target) return null;
+        if (!shape) return null;
 
         const keyframes: Keyframe[] = [{}, {}];
 
@@ -76,7 +76,7 @@ export const executor: AnimationExecutor = (shape, animation, commonEffectTiming
           Object.assign(keyframes[1], { [attr]: toStyle[attr] ?? inferDefaultValue(attr) });
         });
 
-        const result = executeAnimation(target, preprocessKeyframes(keyframes), {
+        const result = executeAnimation(shape, preprocessKeyframes(keyframes), {
           ...DEFAULT_ANIMATION_OPTIONS,
           ...commonEffectTiming,
           ...individualEffectTiming,
@@ -92,7 +92,7 @@ export const executor: AnimationExecutor = (shape, animation, commonEffectTiming
 
   const mainResult = keyResult! || results?.[0];
 
-  if (mainResult === null) return null;
+  if (!mainResult) return null;
 
   return createAnimationsProxy(
     mainResult,
diff --git a/packages/g6/src/elements/index.ts b/packages/g6/src/elements/index.ts
index 56071beac38..bedb8915233 100644
--- a/packages/g6/src/elements/index.ts
+++ b/packages/g6/src/elements/index.ts
@@ -1,2 +1,2 @@
-export { Cubic, Line, Polyline, Quadratic } from './edges';
+export { Cubic, CubicHorizontal, CubicVertical, Line, Polyline, Quadratic } from './edges';
 export { Circle, Ellipse, Rect, Star, Triangle } from './nodes';
diff --git a/packages/g6/src/registry/build-in.ts b/packages/g6/src/registry/build-in.ts
index 1aafafa63e5..48cc1485aac 100644
--- a/packages/g6/src/registry/build-in.ts
+++ b/packages/g6/src/registry/build-in.ts
@@ -1,5 +1,17 @@
 import { fade, translate } from '../animations';
-import { Circle, Cubic, Ellipse, Line, Polyline, Quadratic, Rect, Star, Triangle } from '../elements';
+import {
+  Circle,
+  Cubic,
+  CubicHorizontal,
+  CubicVertical,
+  Ellipse,
+  Line,
+  Polyline,
+  Quadratic,
+  Rect,
+  Star,
+  Triangle,
+} from '../elements';
 import {
   CircularLayout,
   ComboCombinedLayout,
@@ -37,6 +49,8 @@ export const BUILT_IN_PLUGINS = {
     line: Line,
     polyline: Polyline,
     quadratic: Quadratic,
+    'cubic-horizontal': CubicHorizontal,
+    'cubic-vertical': CubicVertical,
   },
   layout: {
     'combo-combined': ComboCombinedLayout,
diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts
index c1da95a1c25..002c4975d75 100644
--- a/packages/g6/src/runtime/element.ts
+++ b/packages/g6/src/runtime/element.ts
@@ -411,12 +411,7 @@ export class ElementController {
     const sourceNode = this.getElement<BaseNode<any, any>>(source);
     const targetNode = this.getElement<BaseNode<any, any>>(target);
 
-    const sourcePoint = sourceNode?.getCenter() || [0, 0, 0];
-    const targetPoint = targetNode?.getCenter() || [0, 0, 0];
-
     return {
-      sourcePoint,
-      targetPoint,
       sourceNode,
       targetNode,
     };
@@ -531,27 +526,26 @@ export class ElementController {
     // 创建渲染任务 / Create render task
     const renderContext = { animation: true };
 
-    const destroyTasks = this.getDestroyTasks(
-      { nodes: nodesToRemove, edges: edgesToRemove, combos: combosToRemove },
-      renderContext,
-    );
+    const dataToDestroy = { nodes: nodesToRemove, edges: edgesToRemove, combos: combosToRemove };
+    const destroyTasks = this.getDestroyTasks(dataToDestroy, renderContext);
 
-    const createTasks = this.getCreateTasks(
-      { nodes: nodesToAdd, edges: edgesToAdd, combos: combosToAdd },
-      renderContext,
-    );
+    const dataToCreate = { nodes: nodesToAdd, edges: edgesToAdd, combos: combosToAdd };
+    const createTasks = this.getCreateTasks(dataToCreate, renderContext);
 
-    const updateTasks = this.getUpdateTasks(
-      { nodes: nodesToUpdate, edges: deduplicate(edgesToUpdate, idOf), combos: deduplicate(combosToUpdate, idOf) },
-      renderContext,
-    );
+    const dataToUpdate = {
+      nodes: nodesToUpdate,
+      edges: deduplicate(edgesToUpdate, idOf),
+      combos: deduplicate(combosToUpdate, idOf),
+    };
+    const updateTasks = this.getUpdateTasks(dataToUpdate, renderContext);
 
+    const diffData = { create: dataToCreate, update: dataToUpdate, destroy: dataToDestroy };
     return executeAnimatableTasks([...destroyTasks, ...createTasks, ...updateTasks], {
       before: () => this.emit(new DrawEvent(GraphEvent.BEFORE_DRAW)),
       beforeAnimate: (animation) =>
-        this.emit(new AnimateEvent(GraphEvent.BEFORE_ANIMATE, AnimationTypeEnum.DRAW, animation)),
+        this.emit(new AnimateEvent(GraphEvent.BEFORE_ANIMATE, AnimationTypeEnum.DRAW, animation, diffData)),
       afterAnimate: (animation) =>
-        this.emit(new AnimateEvent(GraphEvent.AFTER_ANIMATE, AnimationTypeEnum.DRAW, animation)),
+        this.emit(new AnimateEvent(GraphEvent.AFTER_ANIMATE, AnimationTypeEnum.DRAW, animation, diffData)),
       after: () => this.emit(new DrawEvent(GraphEvent.AFTER_DRAW)),
     })?.finished.then(() => {});
   }
@@ -573,7 +567,6 @@ export class ElementController {
     const id = idOf(datum);
     const currentShape = this.getElement(id);
     if (currentShape) return () => null;
-
     const renderData = this.getElementComputedStyle(elementType, id);
 
     // get shape constructor
@@ -701,11 +694,9 @@ export class ElementController {
     const { nodes: nodeLikeResults, edges: edgeResults } = layoutResult;
     if (Object.keys(nodeLikeResults).length === 0 && Object.keys(edgeResults).length === 0) return null;
 
-    // TODO dagre 布局计算出来的 controlPoints 会导致边异常，需要处理
-    // controlPoints calculated by dagre layout will cause the edge to be abnormal and need to be handled
-    // Object.entries(edgeResults).forEach(([id, style]) => {
-    //   this.setRuntimeStyle(id, style);
-    // });
+    Object.entries(edgeResults).forEach(([id, style]) => {
+      this.setRuntimeStyle(id, style);
+    });
 
     this.updateNodeLikePosition(nodeLikeResults, animation, Object.keys(edgeResults));
   }
diff --git a/packages/g6/src/themes/dark.ts b/packages/g6/src/themes/dark.ts
index 39750640f09..4d0204a1a1e 100644
--- a/packages/g6/src/themes/dark.ts
+++ b/packages/g6/src/themes/dark.ts
@@ -23,7 +23,7 @@ export const dark: Theme = {
     state: {},
     animation: {
       enter: 'fade',
-      update: [{ fields: ['sourcePoint', 'targetPoint', 'stroke'] }],
+      update: [{ fields: ['stroke'] }, { fields: ['path'], shape: 'key' }],
       exit: 'fade',
       show: 'fade',
       hide: 'fade',
diff --git a/packages/g6/src/themes/light.ts b/packages/g6/src/themes/light.ts
index 2f4c1aa48a0..b2822a10d90 100644
--- a/packages/g6/src/themes/light.ts
+++ b/packages/g6/src/themes/light.ts
@@ -23,7 +23,7 @@ export const light: Theme = {
     state: {},
     animation: {
       enter: 'fade',
-      update: [{ fields: ['sourcePoint', 'targetPoint', 'stroke'] }],
+      update: [{ fields: ['stroke'] }, { fields: ['path'], shape: 'key' }],
       exit: 'fade',
       show: 'fade',
       hide: 'fade',
diff --git a/packages/g6/src/utils/animation.ts b/packages/g6/src/utils/animation.ts
index 2e9c6464d13..b19d5f93ace 100644
--- a/packages/g6/src/utils/animation.ts
+++ b/packages/g6/src/utils/animation.ts
@@ -1,6 +1,7 @@
 import type { DisplayObject, IAnimation } from '@antv/g';
 import { isEqual, isNil } from '@antv/util';
 import type { AnimatableTask, Keyframe } from '../types';
+import { isNode } from './is';
 import { getDescendantShapes } from './shape';
 
 export function createAnimationsProxy(animations: IAnimation[]): IAnimation | null;
@@ -72,7 +73,8 @@ export function preprocessKeyframes(keyframes: Keyframe[]): Keyframe[] {
       // 属性值不能为空 / property value cannot be empty
       values.some((value) => isNil(value)) ||
       // 属性值必须不完全一致 / property value must not be exactly the same
-      values.every((value) => isEqual(value, values[0]))
+      // 属性值可以是同一节点 / property value can be the same node
+      values.every((value) => !isNode(value) && isEqual(value, values[0]))
     ) {
       delete propertyIndexedKeyframes[key];
     }
@@ -107,6 +109,7 @@ export function executeAnimation<T extends DisplayObject>(
   keyframes: Keyframe[],
   options: KeyframeAnimationOptions,
 ) {
+  if (keyframes.length === 0) return null;
   const inheritedAttrs = ['opacity'];
 
   const needInheritAnimation = keyframes.some((keyframe) =>
diff --git a/packages/g6/src/utils/layout.ts b/packages/g6/src/utils/layout.ts
index 7277d67f0bf..ef5eae9ec28 100644
--- a/packages/g6/src/utils/layout.ts
+++ b/packages/g6/src/utils/layout.ts
@@ -58,7 +58,7 @@ export function pickLayoutResult(result: LayoutMapping): LayoutResult {
         const { data } = edge;
         const result: Record<string, unknown> = {};
         if ('controlPoints' in data) result.controlPoints = data.controlPoints!.map(parsePoint);
-        if ('points' in data) result.points = data.points!.map(parsePoint);
+        // if ('points' in data) result.points = data.points!.map(parsePoint);
         return [id, result];
       }),
     ),
diff --git a/packages/g6/src/utils/point.ts b/packages/g6/src/utils/point.ts
index 0514aab433d..a7e04d422c7 100644
--- a/packages/g6/src/utils/point.ts
+++ b/packages/g6/src/utils/point.ts
@@ -203,14 +203,15 @@ export function getRectIntersectPoint(p: Point, bbox: AABB): Point {
  * @returns <zh/> 交点 | <en/> intersection
  */
 export function getEllipseIntersectPoint(p: Point, bbox: AABB): Point {
-  const rx = getBBoxWidth(bbox) / 2;
-  const ry = getBBoxHeight(bbox) / 2;
   const center = bbox.center;
-
   const vec = subtract(p, center);
-
   let radians = angle(vec, [1, 0, 0]);
+  if (isNaN(radians)) return center;
+
   if (radians < 0) radians += Math.PI * 2;
+
+  const rx = getBBoxWidth(bbox) / 2;
+  const ry = getBBoxHeight(bbox) / 2;
   return [
     center[0] + Math.abs(rx * Math.cos(radians)) * Math.sign(vec[0]),
     center[1] + Math.abs(ry * Math.sin(radians)) * Math.sign(vec[1]),