diff --git a/packages/g6/__tests__/demo/static/node-rect.ts b/packages/g6/__tests__/demo/static/node-rect.ts
index e16a73c0a2a..add2d075b31 100644
--- a/packages/g6/__tests__/demo/static/node-rect.ts
+++ b/packages/g6/__tests__/demo/static/node-rect.ts
@@ -1,162 +1,86 @@
-import { Line } from '../../../src/elements/edges';
-import { Rect } from '../../../src/elements/nodes';
+import { Graph } from '../../../src';
 import type { StaticTestCase } from '../types';
 
 export const nodeRect: StaticTestCase = async (context) => {
   const { canvas } = context;
 
-  canvas.appendChild(
-    new Rect({
-      style: {
-        x: 100,
-        y: 50,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        width: 50,
-        height: 50,
-        labelText: 'simple',
-        labelWordWrapWidth: 100,
-        labelPosition: 'bottom',
-      },
-    }),
-  );
-
-  canvas.appendChild(
-    new Rect({
-      style: {
-        x: 200,
-        y: 50,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        width: 50,
-        height: 20,
-        iconText: 'Y',
-        iconFontSize: 14,
-        iconFill: '#5B8FF9',
-        iconFontWeight: 800,
-        labelText: 'this is a looooooooooooooooooooog label',
-      },
-    }),
-  );
+  const data = {
+    nodes: [
+      { id: 'rect' },
+      { id: 'rect-halo' },
+      { id: 'rect-badges' },
+      { id: 'rect-ports' },
+      { id: 'rect-active' },
+      { id: 'rect-selected' },
+      { id: 'rect-highlight' },
+      { id: 'rect-inactive' },
+    ],
+  };
 
-  canvas.appendChild(
-    new Rect({
+  const graph = new Graph({
+    container: canvas,
+    data,
+    node: {
       style: {
-        // key
-        x: 300,
-        y: 50,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        width: 50,
-        height: 70,
-        // label
-        label: false,
-        labelText: 'no-label',
-        // halo
-        halo: true,
-        // ports
-        ports: [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }],
+        type: 'rect', // 👈🏻 Node shape type.
+        radius: 4, // 👈🏻 Set the radius.
+        width: 40,
+        height: 40,
+        fill: '#1783FF',
+        labelText: (d) => d.id,
+        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconWidth: 30,
+        iconHeight: 30,
+        halo: (d) => d.id.includes('halo'),
+        ports: (d) =>
+          d.id.includes('ports')
+            ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
+            : [],
         portStroke: '#31d0c6',
         portFill: '#fff',
-        portR: 4,
-        // icon
-        iconSrc: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
-        // badges
-        badges: [
-          { text: 'A', position: 'right-top', backgroundFill: '#8291b2', padding: [1, 4] },
-          { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-          { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
-        ],
+        portR: 2,
+        portLineWidth: 1,
+        badges: (d) =>
+          d.id.includes('badges')
+            ? [
+                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
+                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
+                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+              ]
+            : [],
         badgeFill: '#fff',
-        badgeFontSize: 10,
-      },
-    }),
-  );
-
-  const node1 = canvas.appendChild(
-    new Rect({
-      id: 'node1',
-      style: {
-        x: 100,
-        y: 250,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        // ports
-        ports: [
-          { position: 'left', stroke: '#31d0c6', fill: '#fff' },
-          { position: 'right', stroke: '#31d0c6', fill: '#fff' },
-          { position: 'top', stroke: '#31d0c6', fill: '#fff' },
-          { position: 'bottom', stroke: '#31d0c6', fill: '#fff' },
-        ],
-        portR: 4,
-      },
-    }),
-  );
-
-  const node2 = canvas.appendChild(
-    new Rect({
-      id: 'node2',
-      style: {
-        x: 200,
-        y: 175,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        // ports
-        ports: [
-          { position: [0, 0.2], stroke: '#31d0c6', fill: '#fff' },
-          { position: [0, 0.5], stroke: '#31d0c6', fill: '#fff' },
-          { position: [0, 0.8], stroke: '#31d0c6', fill: '#fff' },
-        ],
-        portR: 4,
+        badgeFontSize: 8,
+        badgePadding: [1, 4],
       },
-    }),
-  );
-
-  canvas.appendChild(
-    new Line({
-      id: 'line',
-      style: {
-        sourceNode: node1,
-        targetNode: node2,
-        stroke: '#1890FF',
-        endArrow: true,
-      },
-    }),
-  );
-
-  const node3 = canvas.appendChild(
-    new Rect({
-      id: 'node3',
-      style: {
-        x: 250,
-        y: 250,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
+      state: {
+        active: {
+          halo: true,
+        },
+        selected: {
+          halo: true,
+          lineWidth: 2,
+          stroke: '#000',
+        },
+        highlight: {
+          halo: false,
+          lineWidth: 2,
+          stroke: '#000',
+        },
+        inactive: {
+          opacity: 0.2,
+        },
       },
-    }),
-  );
+    },
+    layout: {
+      type: 'grid',
+    },
+    animation: false,
+  });
 
-  const node4 = canvas.appendChild(
-    new Rect({
-      id: 'node4',
-      style: {
-        x: 350,
-        y: 175,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-      },
-    }),
-  );
+  await graph.render();
 
-  canvas.appendChild(
-    new Line({
-      id: 'line',
-      style: {
-        sourceNode: node3,
-        targetNode: node4,
-        stroke: '#1890FF',
-        endArrow: true,
-      },
-    }),
-  );
+  graph.setElementState('rect-active', 'active');
+  graph.setElementState('rect-selected', 'selected');
+  graph.setElementState('rect-highlight', 'highlight');
+  graph.setElementState('rect-inactive', 'inactive');
 };
diff --git a/packages/g6/__tests__/demo/static/node-triangle.ts b/packages/g6/__tests__/demo/static/node-triangle.ts
index b3bf5350109..e7ea0c95743 100644
--- a/packages/g6/__tests__/demo/static/node-triangle.ts
+++ b/packages/g6/__tests__/demo/static/node-triangle.ts
@@ -1,6 +1,4 @@
-// Change to import { Graph } from '@antv/g6'; if you are using npm
-// todo: when test env, use SVG always.
-import { Graph } from '../../mock';
+import { Graph } from '../../../src';
 import type { StaticTestCase } from '../types';
 
 export const nodeTriangle: StaticTestCase = async (context) => {
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 5d445a14823..e510e0c783f 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,145,20)">
+          <g transform="matrix(1,0,0,1,154.284760,23.713907)">
             <path
               id="key"
               fill="none"
-              d="M 125,0 L 0,50"
+              d="M 106.43046618229482,0 L 0,42.57218647291793"
               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,270,20)">
+          <g transform="matrix(1,0,0,1,276.476471,27.619392)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 170,200"
+              d="M 0,0 L 157.04703159808923,184.76121364481082"
               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,145,70)">
+          <g transform="matrix(1,0,0,1,150.734619,78.192322)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 35,50"
+              d="M 0,0 L 23.530753112733407,33.6153615896192"
               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,270,20)">
+          <g transform="matrix(1,0,0,1,278.137329,25.812382)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 70,50"
+              d="M 0,0 L 53.725330575865314,38.37523612561807"
               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,180,70)">
+          <g transform="matrix(1,0,0,1,189.544800,72.982750)">
             <path
               id="key"
               fill="none"
-              d="M 160,0 L 0,50"
+              d="M 140.91040043929942,0 L 0,44.03450013728107"
               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,100,120)">
+          <g transform="matrix(1,0,0,1,108.479980,125.299988)">
             <path
               id="key"
               fill="none"
-              d="M 80,0 L 0,50"
+              d="M 63.040033919898235,0 L 0,39.400021199936404"
               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,180,120)">
+          <g transform="matrix(1,0,0,1,188.479980,125.299988)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 80,50"
+              d="M 0,0 L 63.040033919898235,39.400021199936404"
               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,170)">
+          <g transform="matrix(1,0,0,1,108.479980,175.299988)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 80,50"
+              d="M 0,0 L 63.040033919898235,39.40002119993642"
               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,20,170)">
+          <g transform="matrix(1,0,0,1,28.479982,175.299988)">
             <path
               id="key"
               fill="none"
-              d="M 80,0 L 0,50"
+              d="M 63.040033919898235,0 L 0,39.40002119993642"
               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,20,220)">
+          <g transform="matrix(1,0,0,1,29.887156,221.498047)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 330,50"
+              d="M 0,0 L 310.22568991550463,47.00389241144012"
               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,350,220)">
+          <g transform="matrix(1,0,0,1,358.741577,224.856430)">
             <path
               id="key"
               fill="none"
-              d="M 90,0 L 0,50"
+              d="M 72.51685447756927,0 L 0,40.28714137642737"
               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,70)">
+          <g transform="matrix(1,0,0,1,340.499390,79.987526)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 10,200"
+              d="M 0,0 L 9.001247661122193,180.0249532224431"
               stroke="rgba(139,155,175,1)"
               stroke-width="1"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-polyline.svg b/packages/g6/__tests__/integration/snapshots/static/edge-polyline.svg
index 6c8d4afa1b4..9943e33c4db 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-polyline.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-polyline.svg
@@ -16,11 +16,14 @@
         height="20"
         transform="matrix(1,0,0,1,50,40)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -90,11 +93,14 @@
         height="20"
         transform="matrix(1,0,0,1,150,40)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -168,11 +174,14 @@
         height="20"
         transform="matrix(1,0,0,1,250,40)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -236,11 +245,14 @@
         height="20"
         transform="matrix(1,0,0,1,50,120)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -278,11 +290,14 @@
         height="20"
         transform="matrix(1,0,0,1,150,75)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -336,11 +351,14 @@
         height="20"
         transform="matrix(1,0,0,1,50,220)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -378,11 +396,14 @@
         height="20"
         transform="matrix(1,0,0,1,150,175)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -436,11 +457,14 @@
         height="20"
         transform="matrix(1,0,0,1,50,320)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -478,11 +502,14 @@
         height="20"
         transform="matrix(1,0,0,1,150,275)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -536,11 +563,14 @@
         height="20"
         transform="matrix(1,0,0,1,50,420)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -588,11 +618,14 @@
         height="20"
         transform="matrix(1,0,0,1,150,375)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -646,11 +679,14 @@
         height="20"
         transform="matrix(1,0,0,1,250,420)"
       >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
+            d="M 0,0 l 50,0 l 0,20 l-50 0 z"
+            transform="translate(-25,-10)"
+            width="50"
+            height="20"
             stroke="rgba(139,155,175,1)"
           />
         </g>
@@ -688,11 +724,14 @@
         height="50"
         transform="matrix(1,0,0,1,350,375)"
       >
-        <g transform="matrix(1,0,0,1,-25,-25)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(248,248,248,1)"
-            points="50,0 50,50 0,50 0,0"
+            d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+            transform="translate(-25,-25)"
+            width="50"
+            height="50"
             stroke="rgba(139,155,175,1)"
           />
         </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/node-rect.svg b/packages/g6/__tests__/integration/snapshots/static/node-rect.svg
index 3487fd9223d..93927523021 100644
--- a/packages/g6/__tests__/integration/snapshots/static/node-rect.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/node-rect.svg
@@ -9,489 +9,723 @@
   <defs />
   <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
     <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-5"
-        fill="none"
-        width="50"
-        height="50"
-        transform="matrix(1,0,0,1,100,50)"
-      >
-        <g transform="matrix(1,0,0,1,-25,-25)">
-          <polygon
-            id="key"
-            fill="rgba(248,248,248,1)"
-            points="50,0 50,50 0,50 0,0"
-            stroke="rgba(139,155,175,1)"
-          />
-        </g>
-        <g id="label" fill="none" transform="matrix(1,0,0,1,0,25)">
-          <g transform="matrix(1,0,0,1,-22.840000,-2)">
+      <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+      <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)" />
+      <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="rect"
+          fill="none"
+          width="40"
+          height="40"
+          transform="matrix(1,0,0,1,83.333336,83.333336)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
             <path
-              id="background"
-              fill="none"
-              d="M 0,0 l 108,0 l 0,27 l-108 0 z"
-              opacity="0.75"
-              stroke-width="0"
-              width="108"
-              height="27"
+              id="key"
+              fill="rgba(23,131,255,1)"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(139,155,175,1)"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
-            <text
-              id="text"
-              fill="rgba(0,0,0,1)"
-              dominant-baseline="central"
-              paint-order="stroke"
-              dx="0.5"
-              dy="11.5px"
-              font-size="12"
-              text-anchor="middle"
-            >
-              simple
-            </text>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
+            <g transform="matrix(1,0,0,1,-15.520000,-2)">
+              <path
+                id="background"
+                fill="none"
+                d="M 0,0 l 88,0 l 0,27 l-88 0 z"
+                opacity="0.75"
+                stroke-width="0"
+                width="88"
+                height="27"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(0,0,0,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+              >
+                rect
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
+            fill="none"
+            height="30"
+            width="30"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="none"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-15,-15)"
+                height="30"
+                width="30"
+              />
+            </g>
           </g>
         </g>
-      </g>
-      <g
-        id="g-svg-10"
-        fill="none"
-        width="50"
-        height="20"
-        transform="matrix(1,0,0,1,200,50)"
-      >
-        <g transform="matrix(1,0,0,1,-25,-10)">
-          <polygon
-            id="key"
-            fill="rgba(248,248,248,1)"
-            points="50,0 50,20 0,20 0,0"
-            stroke="rgba(139,155,175,1)"
-          />
-        </g>
-        <g id="label" fill="none" transform="matrix(1,0,0,1,0,10)">
-          <g transform="matrix(1,0,0,1,-53.200001,-2)">
+        <g
+          id="rect-halo"
+          fill="none"
+          width="40"
+          height="40"
+          transform="matrix(1,0,0,1,250,83.333336)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
             <path
-              id="background"
+              id="halo"
               fill="none"
-              d="M 0,0 l 108,0 l 0,27 l-108 0 z"
-              opacity="0.75"
-              stroke-width="0"
-              width="108"
-              height="27"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(23,131,255,1)"
+              stroke-dasharray="0,0"
+              stroke-width="12"
+              stroke-opacity="0.25"
+              pointer-events="none"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,0)">
-            <text
-              id="text"
-              fill="rgba(0,0,0,1)"
-              dominant-baseline="central"
-              paint-order="stroke"
-              dx="0.5"
-              dy="11.5px"
-              font-size="12"
-              text-anchor="middle"
-            >
-              this is a looooo...
-            </text>
+            <path
+              id="key"
+              fill="rgba(23,131,255,1)"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(139,155,175,1)"
+            />
+          </g>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
+            <g transform="matrix(1,0,0,1,-30.520000,-2)">
+              <path
+                id="background"
+                fill="none"
+                d="M 0,0 l 88,0 l 0,27 l-88 0 z"
+                opacity="0.75"
+                stroke-width="0"
+                width="88"
+                height="27"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(0,0,0,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+              >
+                rect-halo
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
+            fill="none"
+            height="30"
+            width="30"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="none"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-15,-15)"
+                height="30"
+                width="30"
+              />
+            </g>
           </g>
         </g>
         <g
-          id="icon"
+          id="rect-badges"
           fill="none"
-          height="20"
-          width="20"
-          transform="matrix(1,0,0,1,0,0)"
+          width="40"
+          height="40"
+          transform="matrix(1,0,0,1,416.666656,83.333336)"
         >
           <g transform="matrix(1,0,0,1,0,0)">
-            <text
-              id="icon"
-              fill="rgba(91,143,249,1)"
-              dominant-baseline="central"
-              paint-order="stroke"
-              dx="0.5"
-              text-anchor="middle"
-              height="20"
-              width="20"
-              font-size="14"
-              font-weight="800"
-            >
-              Y
-            </text>
+            <path
+              id="key"
+              fill="rgba(23,131,255,1)"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(139,155,175,1)"
+            />
           </g>
-        </g>
-      </g>
-      <g
-        id="g-svg-17"
-        fill="none"
-        width="50"
-        height="70"
-        transform="matrix(1,0,0,1,300,50)"
-      >
-        <g transform="matrix(1,0,0,1,-25,-35)">
-          <polygon
-            id="halo"
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
+            <g transform="matrix(1,0,0,1,-39.759998,-2)">
+              <path
+                id="background"
+                fill="none"
+                d="M 0,0 l 88,0 l 0,27 l-88 0 z"
+                opacity="0.75"
+                stroke-width="0"
+                width="88"
+                height="27"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(0,0,0,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+              >
+                rect-badges
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
             fill="none"
-            points="50,0 50,70 0,70 0,0"
-            stroke="rgba(248,248,248,1)"
-            stroke-dasharray="0,0"
-            stroke-width="12"
-            stroke-opacity="0.25"
-            pointer-events="none"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,-25,-35)">
-          <polygon
-            id="key"
-            fill="rgba(248,248,248,1)"
-            points="50,0 50,70 0,70 0,0"
-            stroke="rgba(139,155,175,1)"
-          />
+            height="30"
+            width="30"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="none"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-15,-15)"
+                height="30"
+                width="30"
+              />
+            </g>
+          </g>
+          <g id="badge-0" fill="none" transform="matrix(1,0,0,1,20,-20)">
+            <g id="label" fill="none" transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,-4,-1)">
+                <path
+                  id="background"
+                  fill="rgba(130,145,178,1)"
+                  d="M 7.26,0 l 0,0 a 7.26,7.26,0,0,1,7.26,7.26 l 0,4.48 a 7.26,7.26,0,0,1,-7.26,7.26 l 0,0 a 7.26,7.26,0,0,1,-7.26,-7.26 l 0,-4.48 a 7.26,7.26,0,0,1,7.26,-7.26 z"
+                  stroke-width="0"
+                  width="14.52"
+                  height="19"
+                />
+              </g>
+              <g transform="matrix(1,0,0,1,0,0)">
+                <text
+                  id="text"
+                  fill="rgba(255,255,255,1)"
+                  dominant-baseline="central"
+                  paint-order="stroke"
+                  dx="0.5"
+                  dy="8.5px"
+                  font-size="8"
+                  text-anchor="left"
+                >
+                  A
+                </text>
+              </g>
+            </g>
+          </g>
+          <g id="badge-1" fill="none" transform="matrix(1,0,0,1,20,0)">
+            <g id="label" fill="none" transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,-4,-9.500000)">
+                <path
+                  id="background"
+                  fill="rgba(230,108,91,1)"
+                  d="M 9.5,0 l 27.520000000000003,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -27.520000000000003,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
+                  stroke-width="0"
+                  width="46.52"
+                  height="19"
+                />
+              </g>
+              <g transform="matrix(1,0,0,1,0,0)">
+                <text
+                  id="text"
+                  fill="rgba(255,255,255,1)"
+                  dominant-baseline="central"
+                  paint-order="stroke"
+                  dx="0.5"
+                  font-size="8"
+                  text-anchor="left"
+                >
+                  Important
+                </text>
+              </g>
+            </g>
+          </g>
+          <g id="badge-2" fill="none" transform="matrix(1,0,0,1,20,20)">
+            <g id="label" fill="none" transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,-4,-18)">
+                <path
+                  id="background"
+                  fill="rgba(229,185,94,1)"
+                  d="M 9.5,0 l 15.120000000000005,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -15.120000000000005,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
+                  stroke-width="0"
+                  width="34.120000000000005"
+                  height="19"
+                />
+              </g>
+              <g transform="matrix(1,0,0,1,0,0)">
+                <text
+                  id="text"
+                  fill="rgba(255,255,255,1)"
+                  dominant-baseline="central"
+                  paint-order="stroke"
+                  dx="0.5"
+                  dy="-8.5px"
+                  font-size="8"
+                  text-anchor="left"
+                >
+                  Notice
+                </text>
+              </g>
+            </g>
+          </g>
         </g>
         <g
-          id="icon"
+          id="rect-ports"
           fill="none"
-          height="20"
-          width="20"
-          transform="matrix(1,0,0,1,0,0)"
+          width="40"
+          height="40"
+          transform="matrix(1,0,0,1,83.333336,250)"
         >
           <g transform="matrix(1,0,0,1,0,0)">
-            <image
-              id="icon"
-              fill="none"
-              preserveAspectRatio="none"
-              x="0"
-              y="0"
-              href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
-              transform="translate(-10,-10)"
-              height="20"
-              width="20"
+            <path
+              id="key"
+              fill="rgba(23,131,255,1)"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(139,155,175,1)"
             />
           </g>
-        </g>
-        <g transform="matrix(1,0,0,1,-25,0)">
-          <circle
-            id="port-0"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            stroke="rgba(49,208,198,1)"
-            r="4"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,25,0)">
-          <circle
-            id="port-1"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            stroke="rgba(49,208,198,1)"
-            r="4"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,0,-35)">
-          <circle
-            id="port-2"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            stroke="rgba(49,208,198,1)"
-            r="4"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,0,35)">
-          <circle
-            id="port-3"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            stroke="rgba(49,208,198,1)"
-            r="4"
-          />
-        </g>
-        <g id="badge-0" fill="none" transform="matrix(1,0,0,1,25,-35)">
-          <g id="label" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4,-1)">
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
+            <g transform="matrix(1,0,0,1,-33.580002,-2)">
               <path
                 id="background"
-                fill="rgba(130,145,178,1)"
-                d="M 7.95,0 l 0,0 a 7.95,7.95,0,0,1,7.95,7.95 l 0,5.1 a 7.95,7.95,0,0,1,-7.95,7.95 l 0,0 a 7.95,7.95,0,0,1,-7.95,-7.95 l 0,-5.1 a 7.95,7.95,0,0,1,7.95,-7.95 z"
+                fill="none"
+                d="M 0,0 l 88,0 l 0,27 l-88 0 z"
+                opacity="0.75"
                 stroke-width="0"
-                width="15.9"
-                height="21"
+                width="88"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(255,255,255,1)"
+                fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                dy="9.5px"
-                font-size="10"
-                text-anchor="left"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
               >
-                A
+                rect-ports
               </text>
             </g>
           </g>
+          <g
+            id="icon"
+            fill="none"
+            height="30"
+            width="30"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="none"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-15,-15)"
+                height="30"
+                width="30"
+              />
+            </g>
+          </g>
+          <g transform="matrix(1,0,0,1,-20,0)">
+            <circle
+              id="port-0"
+              fill="rgba(255,255,255,1)"
+              transform="translate(-2,-2)"
+              cx="2"
+              cy="2"
+              stroke="rgba(49,208,198,1)"
+              r="2"
+              stroke-width="1"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,20,0)">
+            <circle
+              id="port-1"
+              fill="rgba(255,255,255,1)"
+              transform="translate(-2,-2)"
+              cx="2"
+              cy="2"
+              stroke="rgba(49,208,198,1)"
+              r="2"
+              stroke-width="1"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,0,-20)">
+            <circle
+              id="port-2"
+              fill="rgba(255,255,255,1)"
+              transform="translate(-2,-2)"
+              cx="2"
+              cy="2"
+              stroke="rgba(49,208,198,1)"
+              r="2"
+              stroke-width="1"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,0,20)">
+            <circle
+              id="port-3"
+              fill="rgba(255,255,255,1)"
+              transform="translate(-2,-2)"
+              cx="2"
+              cy="2"
+              stroke="rgba(49,208,198,1)"
+              r="2"
+              stroke-width="1"
+            />
+          </g>
         </g>
-        <g id="badge-1" fill="none" transform="matrix(1,0,0,1,25,0)">
-          <g id="label" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4,-11.500000)">
+        <g
+          id="rect-active"
+          fill="none"
+          width="40"
+          height="40"
+          transform="matrix(1,0,0,1,250,250)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
+            <path
+              id="halo"
+              fill="none"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(23,131,255,1)"
+              stroke-dasharray="0,0"
+              stroke-width="12"
+              stroke-opacity="0.25"
+              pointer-events="none"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,0,0)">
+            <path
+              id="key"
+              fill="rgba(23,131,255,1)"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(139,155,175,1)"
+            />
+          </g>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
+            <g transform="matrix(1,0,0,1,-35.799999,-2)">
               <path
                 id="background"
-                fill="rgba(230,108,91,1)"
-                d="M 11.5,0 l 32.9,0 a 11.5,11.5,0,0,1,11.5,11.5 l 0,0 a 11.5,11.5,0,0,1,-11.5,11.5 l -32.9,0 a 11.5,11.5,0,0,1,-11.5,-11.5 l 0,0 a 11.5,11.5,0,0,1,11.5,-11.5 z"
+                fill="none"
+                d="M 0,0 l 88,0 l 0,27 l-88 0 z"
+                opacity="0.75"
                 stroke-width="0"
-                width="55.9"
-                height="23"
+                width="88"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(255,255,255,1)"
+                fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                font-size="10"
-                text-anchor="left"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
               >
-                Important
+                rect-active
               </text>
             </g>
           </g>
+          <g
+            id="icon"
+            fill="none"
+            height="30"
+            width="30"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="none"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-15,-15)"
+                height="30"
+                width="30"
+              />
+            </g>
+          </g>
         </g>
-        <g id="badge-2" fill="none" transform="matrix(1,0,0,1,25,35)">
-          <g id="label" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4,-21)">
+        <g
+          id="rect-selected"
+          fill="none"
+          width="40"
+          height="40"
+          transform="matrix(1,0,0,1,416.666656,250)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
+            <path
+              id="halo"
+              fill="none"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(23,131,255,1)"
+              stroke-width="12"
+              stroke-dasharray="0,0"
+              stroke-opacity="0.25"
+              pointer-events="none"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,0,0)">
+            <path
+              id="key"
+              fill="rgba(23,131,255,1)"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(0,0,0,1)"
+              stroke-width="2"
+            />
+          </g>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
+            <g transform="matrix(1,0,0,1,-43.119999,-2)">
               <path
                 id="background"
-                fill="rgba(229,185,94,1)"
-                d="M 11.5,0 l 17.400000000000006,0 a 11.5,11.5,0,0,1,11.5,11.5 l 0,0 a 11.5,11.5,0,0,1,-11.5,11.5 l -17.400000000000006,0 a 11.5,11.5,0,0,1,-11.5,-11.5 l 0,0 a 11.5,11.5,0,0,1,11.5,-11.5 z"
+                fill="none"
+                d="M 0,0 l 88,0 l 0,27 l-88 0 z"
+                opacity="0.75"
                 stroke-width="0"
-                width="40.400000000000006"
-                height="23"
+                width="88"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(255,255,255,1)"
+                fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                dy="-9.5px"
-                font-size="10"
-                text-anchor="left"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
               >
-                Notice
+                rect-selected
               </text>
             </g>
           </g>
-        </g>
-      </g>
-      <g
-        id="node1"
-        fill="none"
-        width="100"
-        height="30"
-        transform="matrix(1,0,0,1,100,250)"
-      >
-        <g transform="matrix(1,0,0,1,-50,-15)">
-          <polygon
-            id="key"
-            fill="rgba(248,248,248,1)"
-            points="100,0 100,30 0,30 0,0"
-            stroke="rgba(139,155,175,1)"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,-50,0)">
-          <circle
-            id="port-0"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            r="4"
-            stroke="rgba(49,208,198,1)"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,50,0)">
-          <circle
-            id="port-1"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            r="4"
-            stroke="rgba(49,208,198,1)"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,0,-15)">
-          <circle
-            id="port-2"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            r="4"
-            stroke="rgba(49,208,198,1)"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,0,15)">
-          <circle
-            id="port-3"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            r="4"
-            stroke="rgba(49,208,198,1)"
-          />
-        </g>
-      </g>
-      <g
-        id="node2"
-        fill="none"
-        width="100"
-        height="30"
-        transform="matrix(1,0,0,1,200,175)"
-      >
-        <g transform="matrix(1,0,0,1,-50,-15)">
-          <polygon
-            id="key"
-            fill="rgba(248,248,248,1)"
-            points="100,0 100,30 0,30 0,0"
-            stroke="rgba(139,155,175,1)"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,-50,-9)">
-          <circle
-            id="port-0"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            r="4"
-            stroke="rgba(49,208,198,1)"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,-50,0)">
-          <circle
-            id="port-1"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            r="4"
-            stroke="rgba(49,208,198,1)"
-          />
-        </g>
-        <g transform="matrix(1,0,0,1,-50,9)">
-          <circle
-            id="port-2"
-            fill="rgba(255,255,255,1)"
-            transform="translate(-4,-4)"
-            cx="4"
-            cy="4"
-            r="4"
-            stroke="rgba(49,208,198,1)"
-          />
-        </g>
-      </g>
-      <g
-        id="line"
-        fill="none"
-        marker-start="false"
-        marker-end="true"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,150,188)">
-          <path
-            id="key"
+          <g
+            id="icon"
             fill="none"
-            d="M 0,58 L 3.6739403974420594e-16,6"
-            stroke="rgba(24,144,255,1)"
-          />
-          <g transform="matrix(0,1,-1,0,0,6)">
+            height="30"
+            width="30"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="none"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-15,-15)"
+                height="30"
+                width="30"
+              />
+            </g>
+          </g>
+        </g>
+        <g
+          id="rect-highlight"
+          fill="none"
+          width="40"
+          height="40"
+          transform="matrix(1,0,0,1,83.333336,416.666656)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
             <path
-              id="g-svg-52"
-              fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
-              stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
-              stroke-dasharray="0,0"
-              stroke-width="1"
+              id="key"
+              fill="rgba(23,131,255,1)"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(0,0,0,1)"
+              stroke-width="2"
             />
           </g>
-        </g>
-      </g>
-      <g
-        id="node3"
-        fill="none"
-        width="100"
-        height="30"
-        transform="matrix(1,0,0,1,250,250)"
-      >
-        <g transform="matrix(1,0,0,1,-50,-15)">
-          <polygon
-            id="key"
-            fill="rgba(248,248,248,1)"
-            points="100,0 100,30 0,30 0,0"
-            stroke="rgba(139,155,175,1)"
-          />
-        </g>
-      </g>
-      <g
-        id="node4"
-        fill="none"
-        width="100"
-        height="30"
-        transform="matrix(1,0,0,1,350,175)"
-      >
-        <g transform="matrix(1,0,0,1,-50,-15)">
-          <polygon
-            id="key"
-            fill="rgba(248,248,248,1)"
-            points="100,0 100,30 0,30 0,0"
-            stroke="rgba(139,155,175,1)"
-          />
-        </g>
-      </g>
-      <g
-        id="line"
-        fill="none"
-        marker-start="false"
-        marker-end="true"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,270,190)">
-          <path
-            id="key"
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
+            <g transform="matrix(1,0,0,1,-43.599998,-2)">
+              <path
+                id="background"
+                fill="none"
+                d="M 0,0 l 88,0 l 0,27 l-88 0 z"
+                opacity="0.75"
+                stroke-width="0"
+                width="88"
+                height="27"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(0,0,0,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+              >
+                rect-highlight
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
             fill="none"
-            d="M 0,45 L 55.2,3.5999999999999996"
-            stroke="rgba(24,144,255,1)"
-          />
-          <g transform="matrix(-0.800000,0.600000,-0.600000,-0.800000,55.200001,3.600000)">
+            height="30"
+            width="30"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="none"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-15,-15)"
+                height="30"
+                width="30"
+              />
+            </g>
+          </g>
+        </g>
+        <g
+          id="rect-inactive"
+          fill="none"
+          width="40"
+          height="40"
+          transform="matrix(1,0,0,1,250,416.666656)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
             <path
-              id="g-svg-60"
-              fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
-              stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
-              stroke-dasharray="0,0"
-              stroke-width="1"
+              id="key"
+              fill="rgba(23,131,255,1)"
+              d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
+              transform="translate(-20,-20)"
+              width="40"
+              height="40"
+              stroke="rgba(139,155,175,1)"
+              opacity="0.2"
             />
           </g>
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
+            <g transform="matrix(1,0,0,1,-40.959999,-2)">
+              <path
+                id="background"
+                fill="none"
+                d="M 0,0 l 88,0 l 0,27 l-88 0 z"
+                opacity="0.75"
+                stroke-width="0"
+                width="88"
+                height="27"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(0,0,0,1)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+              >
+                rect-inactive
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
+            fill="none"
+            height="30"
+            width="30"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="none"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-15,-15)"
+                height="30"
+                width="30"
+              />
+            </g>
+          </g>
         </g>
       </g>
     </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/node-star.svg b/packages/g6/__tests__/integration/snapshots/static/node-star.svg
index a3111a588b6..282e09e6b8a 100644
--- a/packages/g6/__tests__/integration/snapshots/static/node-star.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/node-star.svg
@@ -370,11 +370,14 @@
         height="50"
         transform="matrix(1,0,0,1,100,250)"
       >
-        <g transform="matrix(1,0,0,1,-25,-25)">
-          <polygon
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
             id="key"
             fill="rgba(0,0,0,0)"
-            points="50,0 50,50 0,50 0,0"
+            d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+            transform="translate(-25,-25)"
+            width="50"
+            height="50"
             stroke="rgba(49,208,198,1)"
             stroke-dasharray="5,5"
           />
diff --git a/packages/g6/src/elements/nodes/rect.ts b/packages/g6/src/elements/nodes/rect.ts
index 0032873c838..3dd90434419 100644
--- a/packages/g6/src/elements/nodes/rect.ts
+++ b/packages/g6/src/elements/nodes/rect.ts
@@ -1,16 +1,18 @@
-import type { DisplayObjectConfig } from '@antv/g';
+import type { DisplayObjectConfig, RectStyleProps as GRectStyleProps, Group } from '@antv/g';
+import { Rect as GRect } from '@antv/g';
 import { deepMix } from '@antv/util';
-import type { Point } from '../../types';
-import { getRectPoints } from '../../utils/element';
-import type { PolygonKeyStyleProps, PolygonStyleProps } from './polygon';
-import { Polygon } from './polygon';
+import type { BaseNodeProps } from '../../types';
+import type { BaseNodeStyleProps } from './base-node';
+import { BaseNode } from './base-node';
 
-type RectKeyStyleProps = PolygonKeyStyleProps;
-export type RectStyleProps = PolygonStyleProps<RectKeyStyleProps>;
+export type RectStyleProps = BaseNodeStyleProps<BaseNodeProps>;
 type ParsedRectStyleProps = Required<RectStyleProps>;
 type RectOptions = DisplayObjectConfig<RectStyleProps>;
 
-export class Rect extends Polygon<RectKeyStyleProps> {
+/**
+ * Draw Rect based on BaseNode, override drawKeyShape.
+ */
+export class Rect extends BaseNode<BaseNodeProps, GRect> {
   static defaultStyleProps: Partial<RectStyleProps> = {
     width: 100,
     height: 30,
@@ -20,7 +22,14 @@ export class Rect extends Polygon<RectKeyStyleProps> {
     super(deepMix({}, { style: Rect.defaultStyleProps }, options));
   }
 
-  protected getPoints(attributes: ParsedRectStyleProps): Point[] {
-    return getRectPoints(Number(attributes.width), Number(attributes.height));
+  protected getKeyStyle(attributes: ParsedRectStyleProps): GRectStyleProps {
+    return {
+      ...(super.getKeyStyle(attributes) as GRectStyleProps),
+      anchor: [0.5, 0.5], // !!! It cannot be set to default values because G.CustomElement cannot handle it properly.
+    };
+  }
+
+  protected drawKeyShape(attributes: ParsedRectStyleProps, container: Group): GRect | undefined {
+    return this.upsert('key', GRect, this.getKeyStyle(attributes), container);
   }
 }
diff --git a/packages/g6/src/elements/shapes/base-shape.ts b/packages/g6/src/elements/shapes/base-shape.ts
index 7bf067a82c6..cc4d227b625 100644
--- a/packages/g6/src/elements/shapes/base-shape.ts
+++ b/packages/g6/src/elements/shapes/base-shape.ts
@@ -117,8 +117,8 @@ export abstract class BaseShape<T extends BaseShapeStyleProps> extends CustomEle
    */
   public getGraphicStyle<T extends Record<string, any>>(
     attributes: T,
-  ): Omit<T, 'x' | 'y' | 'transform' | 'transformOrigin' | 'className' | 'anchor' | 'context'> {
-    const { x, y, className, transform, transformOrigin, anchor, context, ...style } = attributes;
+  ): Omit<T, 'x' | 'y' | 'transform' | 'transformOrigin' | 'className' | 'context'> {
+    const { x, y, className, transform, transformOrigin, context, ...style } = attributes;
     return style;
   }
 
diff --git a/packages/site/examples/item/defaultNodes/demo/meta.json b/packages/site/examples/item/defaultNodes/demo/meta.json
index 65d4703733d..072bd9c1407 100644
--- a/packages/site/examples/item/defaultNodes/demo/meta.json
+++ b/packages/site/examples/item/defaultNodes/demo/meta.json
@@ -21,7 +21,7 @@
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*etLSQYZnJAAAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
-      "filename": "radiusRect.js",
+      "filename": "radiusRect.ts",
       "title": {
         "zh": "圆角矩形",
         "en": "Radius Rect"
diff --git a/packages/site/examples/item/defaultNodes/demo/radiusRect.js b/packages/site/examples/item/defaultNodes/demo/radiusRect.js
deleted file mode 100644
index 3d9bbc3adba..00000000000
--- a/packages/site/examples/item/defaultNodes/demo/radiusRect.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import { Graph } from '@antv/g6';
-
-const data = {
-  nodes: [
-    {
-      id: 'rect',
-      data: {},
-    },
-    {
-      id: 'rect-active',
-      data: {},
-    },
-    {
-      id: 'rect-selected',
-      data: {},
-    },
-
-    {
-      id: 'rect-highlight',
-      data: {},
-    },
-    {
-      id: 'rect-inactive',
-      data: {},
-    },
-    {
-      id: 'rect-badges',
-      data: {},
-    },
-    {
-      id: 'rect-anchorShapes',
-      data: {},
-    },
-  ],
-};
-
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-const graph = new Graph({
-  container: 'container',
-  width,
-  height,
-  modes: {
-    default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
-  },
-  plugins: [
-    {
-      // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
-      type: 'lod-controller',
-      disableLod: true,
-    },
-  ],
-  data,
-  layout: {
-    type: 'grid',
-  },
-  node: (model) => {
-    const { id, data } = model;
-    const config = {
-      id,
-      data: {
-        ...data,
-        type: 'rect-node',
-        keyShape: {
-          radius: 4,
-        },
-        labelShape: {
-          text: id,
-          position: 'bottom',
-          maxWidth: '500%',
-        },
-        labelBackgroundShape: {},
-        iconShape: {
-          img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        },
-        animates: {
-          update: [
-            {
-              fields: ['opacity'],
-              shapeId: 'haloShape',
-              states: ['selected', 'active'],
-            },
-            {
-              fields: ['lineWidth'],
-              shapeId: 'keyShape',
-              states: ['selected', 'active'],
-            },
-          ],
-        },
-      },
-    };
-    if (id.includes('badges')) {
-      config.data.badgeShapes = [
-        {
-          text: 'A',
-          position: 'rightTop',
-        },
-        {
-          text: 'Important',
-          position: 'right',
-        },
-        {
-          text: 'Notice',
-          position: 'rightBottom',
-        },
-      ];
-    }
-    if (id.includes('anchorShapes')) {
-      config.data.anchorShapes = [
-        {
-          position: [0, 0.5],
-        },
-        {
-          position: [0.5, 0],
-        },
-        {
-          position: [0.5, 1],
-        },
-        {
-          position: [1, 0.5],
-        },
-      ];
-    }
-    return config;
-  },
-});
-
-graph.on('afterrender', (e) => {
-  graph.setItemState('rect-active', 'active', true);
-  graph.setItemState('rect-selected', 'selected', true);
-  graph.setItemState('rect-highlight', 'highlight', true);
-  graph.setItemState('rect-inactive', 'inactive', true);
-});
-
-window.graph = graph;
diff --git a/packages/site/examples/item/defaultNodes/demo/radiusRect.ts b/packages/site/examples/item/defaultNodes/demo/radiusRect.ts
new file mode 100644
index 00000000000..708b376e76e
--- /dev/null
+++ b/packages/site/examples/item/defaultNodes/demo/radiusRect.ts
@@ -0,0 +1,82 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+  nodes: [
+    { id: 'rect' },
+    { id: 'rect-halo' },
+    { id: 'rect-badges' },
+    { id: 'rect-ports' },
+    { id: 'rect-active' },
+    { id: 'rect-selected' },
+    { id: 'rect-highlight' },
+    { id: 'rect-inactive' },
+  ],
+};
+
+const graph = new Graph({
+  container: 'container',
+  data,
+  node: {
+    style: {
+      type: 'rect', // 👈🏻 Node shape type.
+      radius: 4, // 👈🏻 Set the radius.
+      width: 40,
+      height: 40,
+      fill: '#1783FF',
+      labelText: (d) => d.id,
+      iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+      iconWidth: 30,
+      iconHeight: 30,
+      halo: (d) => d.id.includes('halo'),
+      ports: (d) =>
+        d.id.includes('ports')
+          ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
+          : [],
+      portStroke: '#31d0c6',
+      portFill: '#fff',
+      portR: 2,
+      portLineWidth: 1,
+      badges: (d) =>
+        d.id.includes('badges')
+          ? [
+              { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
+              { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
+              { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+            ]
+          : [],
+      badgeFill: '#fff',
+      badgeFontSize: 8,
+      badgePadding: [1, 4],
+    },
+    state: {
+      active: {
+        halo: true,
+      },
+      selected: {
+        halo: true,
+        lineWidth: 2,
+        stroke: '#000',
+      },
+      highlight: {
+        halo: false,
+        lineWidth: 2,
+        stroke: '#000',
+      },
+      inactive: {
+        opacity: 0.2,
+      },
+    },
+  },
+  layout: {
+    type: 'grid',
+  },
+});
+
+graph.render();
+
+graph.on('afterrender', () => {
+  graph.setElementState('rect-active', 'active');
+  graph.setElementState('rect-selected', 'selected');
+  graph.setElementState('rect-highlight', 'highlight');
+  graph.setElementState('rect-inactive', 'inactive');
+});