From 911f9b9388fd982c4f4f1a9b64da8d52ab5d6bbb Mon Sep 17 00:00:00 2001
From: xiaoiver <yuqi.pyq@antgroup.com>
Date: Fri, 31 May 2024 11:22:05 +0800
Subject: [PATCH] Release (#1706)

* fix: use a wrapper as parent of camera (#1704)

* chore: commit changeset

* chore: update site

* chore: commit changeset

* chore: update perspective matrix in ci

* chore(release): bump version (#1705)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 __tests__/unit/camera/camera.spec.ts          |   2 +-
 packages/g-canvas/CHANGELOG.md                |   7 +
 packages/g-canvas/package.json                |   2 +-
 packages/g-canvaskit/CHANGELOG.md             |   9 +
 packages/g-canvaskit/package.json             |   2 +-
 packages/g-mobile-webgl/CHANGELOG.md          |   7 +
 packages/g-mobile-webgl/package.json          |   2 +-
 .../g-plugin-canvaskit-renderer/CHANGELOG.md  |   6 +
 .../g-plugin-canvaskit-renderer/package.json  |   2 +-
 .../src/CanvaskitRendererPlugin.ts            |   7 +-
 packages/g-plugin-html-renderer/CHANGELOG.md  |   6 +
 packages/g-plugin-html-renderer/package.json  |   2 +-
 .../CHANGELOG.md                              |   6 +
 .../package.json                              |   2 +-
 .../CHANGELOG.md                              |   6 +
 .../package.json                              |   2 +-
 packages/g-web-components/CHANGELOG.md        |   8 +
 packages/g-web-components/package.json        |   2 +-
 packages/g-webgl/CHANGELOG.md                 |   8 +
 packages/g-webgl/package.json                 |   3 +-
 packages/g-webgpu/CHANGELOG.md                |   7 +
 packages/g-webgpu/package.json                |   2 +-
 pnpm-lock.yaml                                |   3 +
 site/docs/api/basic/display-object.en.md      | 594 ++++++++---------
 site/docs/api/basic/display-object.zh.md      | 607 ++++++++----------
 site/examples/3d/3d-basic/demo/billboard.js   |   8 +-
 site/examples/3d/3d-basic/demo/force-3d.js    |   4 +-
 site/examples/3d/3d-basic/demo/music-viz.tsx  |  28 +-
 .../3d/3d-basic/demo/size-attenuation.js      |   9 +-
 site/examples/3d/geometry/demo/capsule.js     |   4 +-
 site/examples/3d/geometry/demo/cone.js        |   4 +-
 site/examples/3d/geometry/demo/cylinder.js    |   4 +-
 site/examples/3d/geometry/demo/sphere.js      |   4 +-
 site/examples/3d/geometry/demo/torus.js       |   4 +-
 site/examples/3d/material/demo/basic.js       |   4 +-
 site/examples/3d/material/demo/lambert.js     |   4 +-
 site/examples/3d/material/demo/phong.js       |   4 +-
 .../animation/animation-basic/demo/easing.js  |   2 +-
 .../animation-basic/demo/lifecycle.js         |   1 +
 .../animation/animation-basic/demo/onframe.js |   3 +-
 .../animation-effects/demo/line-dash.js       |   2 +-
 .../animation-effects/demo/offset-path.js     |  59 +-
 .../animation-effects/demo/ripple-effect.js   |  16 +-
 .../animation/morph/demo/convert-to-path.js   | 216 +++----
 site/examples/animation/morph/demo/issue.js   |  14 +-
 site/examples/animation/morph/demo/morph.js   |  30 +-
 .../camera/camera-animation/demo/landmark2.js |   3 +-
 site/examples/event/dragndrop/demo/drag.js    |   4 +-
 site/examples/event/picking/demo/shapes.js    |   6 +-
 .../perf/animation/demo/group-move.js         |   8 +-
 site/examples/perf/animation/demo/path.js     |   4 +-
 .../perf/canvas/demo/canvas-circle-path.js    |   8 +-
 site/examples/perf/canvas/demo/vs-g4.0.js     |   2 +-
 .../plugins/dragndrop/demo/dragndrop-group.js |   8 +-
 site/examples/scenegraph/basic/demo/origin.js |  72 +--
 site/examples/shape/circle/demo/circle.js     |  14 +-
 site/examples/shape/circle/demo/filter.js     |   8 -
 .../shape/custom-element/demo/arrow.js        |   2 +-
 site/examples/shape/ellipse/demo/ellipse.js   |  14 +-
 site/examples/shape/html/demo/html.js         |  12 +-
 site/examples/shape/html/demo/override-css.js |   2 -
 .../image/demo/image-keep-aspect-ratio.js     |  14 +-
 site/examples/shape/image/demo/image.js       |  14 +-
 site/examples/shape/line/demo/line.js         |  20 +-
 site/examples/shape/line/demo/marker.js       |  18 +-
 site/examples/shape/path/demo/a-command.js    |   5 +-
 site/examples/shape/path/demo/l-command.js    |   4 +-
 site/examples/shape/path/demo/marker.js       |   5 +-
 site/examples/shape/path/demo/path.js         |  13 +-
 site/examples/shape/path/demo/picking.js      |   2 +-
 site/examples/shape/polygon/demo/marker.js    |   8 +-
 site/examples/shape/polygon/demo/polygon.js   |  14 +-
 site/examples/shape/polyline/demo/marker.js   |   8 +-
 site/examples/shape/polyline/demo/polyline.js |  12 +-
 site/examples/shape/rect/demo/rect.js         |  12 +-
 .../examples/shape/text/demo/d3-word-cloud.js |   7 +-
 .../shape/text/demo/text-single-canvas.js     |   3 -
 site/examples/shape/text/demo/text.js         |  15 +-
 site/examples/style/clip-path/demo/clip.js    |   7 +-
 .../style/gradient/demo/inner-shadow.js       |   2 +-
 site/examples/style/gradient/demo/path.js     |   2 +-
 site/package.json                             |   4 +-
 82 files changed, 957 insertions(+), 1127 deletions(-)

diff --git a/__tests__/unit/camera/camera.spec.ts b/__tests__/unit/camera/camera.spec.ts
index c849f67b3..70c1f425c 100644
--- a/__tests__/unit/camera/camera.spec.ts
+++ b/__tests__/unit/camera/camera.spec.ts
@@ -363,7 +363,7 @@ describe('Camera', () => {
         -0.0020002000965178013,
         0,
         1,
-        -1,
+        1,
         -1.0002000331878662,
         1,
       ),
diff --git a/packages/g-canvas/CHANGELOG.md b/packages/g-canvas/CHANGELOG.md
index ddacfe537..05537189b 100644
--- a/packages/g-canvas/CHANGELOG.md
+++ b/packages/g-canvas/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-canvas
 
+## 2.0.7
+
+### Patch Changes
+
+-   Updated dependencies [756ba5d3]
+    -   @antv/g-plugin-html-renderer@2.0.6
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
index bec3de5ff..e62bb054a 100644
--- a/packages/g-canvas/package.json
+++ b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",
diff --git a/packages/g-canvaskit/CHANGELOG.md b/packages/g-canvaskit/CHANGELOG.md
index 43cb20d5f..1d5e42a0f 100644
--- a/packages/g-canvaskit/CHANGELOG.md
+++ b/packages/g-canvaskit/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-canvaskit
 
+## 1.0.7
+
+### Patch Changes
+
+-   Updated dependencies [756ba5d3]
+-   Updated dependencies [756ba5d3]
+    -   @antv/g-plugin-html-renderer@2.0.6
+    -   @antv/g-plugin-canvaskit-renderer@2.0.6
+
 ## 1.0.6
 
 ### Patch Changes
diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json
index 498ad0e4d..b3d74aa7e 100644
--- a/packages/g-canvaskit/package.json
+++ b/packages/g-canvaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-webgl/CHANGELOG.md b/packages/g-mobile-webgl/CHANGELOG.md
index 630d39c6b..570fb629d 100644
--- a/packages/g-mobile-webgl/CHANGELOG.md
+++ b/packages/g-mobile-webgl/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-mobile-webgl
 
+## 1.0.10
+
+### Patch Changes
+
+-   Updated dependencies [756ba5d3]
+    -   @antv/g-plugin-html-renderer@2.0.6
+
 ## 1.0.9
 
 ### Patch Changes
diff --git a/packages/g-mobile-webgl/package.json b/packages/g-mobile-webgl/package.json
index 0bbac7194..fda5f2a7c 100644
--- a/packages/g-mobile-webgl/package.json
+++ b/packages/g-mobile-webgl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-webgl",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A renderer implemented by WebGL1/2 in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvaskit-renderer/CHANGELOG.md b/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
index c60038b3d..0fea5f51e 100644
--- a/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
+++ b/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-plugin-canvaskit-renderer
 
+## 2.0.6
+
+### Patch Changes
+
+-   756ba5d3: Update deps.
+
 ## 2.0.5
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvaskit-renderer/package.json b/packages/g-plugin-canvaskit-renderer/package.json
index de1570f7c..8c25037ef 100644
--- a/packages/g-plugin-canvaskit-renderer/package.json
+++ b/packages/g-plugin-canvaskit-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvaskit-renderer",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "A G plugin of renderer implementation with CanvasKit",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts b/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts
index 695665bc0..6a34c6db5 100644
--- a/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts
+++ b/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts
@@ -506,8 +506,8 @@ export class CanvaskitRendererPlugin implements RenderingPlugin {
       fill,
       stroke,
       lineWidth,
-      lineCap,
-      lineJoin,
+      lineCap = 'butt',
+      lineJoin = 'miter',
       lineDash,
       lineDashOffset,
       miterLimit,
@@ -633,18 +633,21 @@ export class CanvaskitRendererPlugin implements RenderingPlugin {
           }
 
           strokePaint.setStrokeWidth(lineWidth);
+
           const STROKE_CAP_MAP = {
             butt: CanvasKit.StrokeCap.Butt,
             round: CanvasKit.StrokeCap.Round,
             square: CanvasKit.StrokeCap.Square,
           };
           strokePaint.setStrokeCap(STROKE_CAP_MAP[lineCap]);
+
           const STROKE_JOIN_MAP = {
             bevel: CanvasKit.StrokeJoin.Bevel,
             round: CanvasKit.StrokeJoin.Round,
             miter: CanvasKit.StrokeJoin.Miter,
           };
           strokePaint.setStrokeJoin(STROKE_JOIN_MAP[lineJoin]);
+
           if (!isNil(miterLimit)) {
             strokePaint.setStrokeMiter(miterLimit);
           }
diff --git a/packages/g-plugin-html-renderer/CHANGELOG.md b/packages/g-plugin-html-renderer/CHANGELOG.md
index 7df3d6102..471cd7061 100644
--- a/packages/g-plugin-html-renderer/CHANGELOG.md
+++ b/packages/g-plugin-html-renderer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-plugin-html-renderer
 
+## 2.0.6
+
+### Patch Changes
+
+-   756ba5d3: Use a wrapper as parent of camera in html renderer.
+
 ## 2.0.5
 
 ### Patch Changes
diff --git a/packages/g-plugin-html-renderer/package.json b/packages/g-plugin-html-renderer/package.json
index d19c12fc8..658cd6c32 100644
--- a/packages/g-plugin-html-renderer/package.json
+++ b/packages/g-plugin-html-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-html-renderer",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "A G plugin for rendering HTML",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md b/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
index e8b119c36..4483b63b9 100644
--- a/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-plugin-rough-canvas-renderer
 
+## 2.0.8
+
+### Patch Changes
+
+-   @antv/g-canvas@2.0.7
+
 ## 2.0.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-rough-canvas-renderer/package.json b/packages/g-plugin-rough-canvas-renderer/package.json
index 1005b0394..d00fd4430 100644
--- a/packages/g-plugin-rough-canvas-renderer/package.json
+++ b/packages/g-plugin-rough-canvas-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-rough-canvas-renderer",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "A G plugin of renderer implementation with rough.js",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md b/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
index f9708d17c..1e4d68fac 100644
--- a/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-plugin-zdog-canvas-renderer
 
+## 2.0.7
+
+### Patch Changes
+
+-   @antv/g-canvas@2.0.7
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/g-plugin-zdog-canvas-renderer/package.json b/packages/g-plugin-zdog-canvas-renderer/package.json
index 3cbc4586d..a8ea2937a 100644
--- a/packages/g-plugin-zdog-canvas-renderer/package.json
+++ b/packages/g-plugin-zdog-canvas-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-zdog-canvas-renderer",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "A G plugin of renderer implementation with Zdog",
   "keywords": [
     "antv",
diff --git a/packages/g-web-components/CHANGELOG.md b/packages/g-web-components/CHANGELOG.md
index afe69ff6c..6fcd89440 100644
--- a/packages/g-web-components/CHANGELOG.md
+++ b/packages/g-web-components/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-web-components
 
+## 2.0.11
+
+### Patch Changes
+
+-   Updated dependencies [756ba5d3]
+    -   @antv/g-webgl@2.0.10
+    -   @antv/g-canvas@2.0.7
+
 ## 2.0.10
 
 ### Patch Changes
diff --git a/packages/g-web-components/package.json b/packages/g-web-components/package.json
index cd913f65d..3bedd4638 100644
--- a/packages/g-web-components/package.json
+++ b/packages/g-web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-web-components",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "A declarative usage for G implemented with WebComponents",
   "keywords": [
     "antv",
diff --git a/packages/g-webgl/CHANGELOG.md b/packages/g-webgl/CHANGELOG.md
index 98572be94..c8e24f358 100644
--- a/packages/g-webgl/CHANGELOG.md
+++ b/packages/g-webgl/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-webgl
 
+## 2.0.10
+
+### Patch Changes
+
+-   756ba5d3: Update deps.
+-   Updated dependencies [756ba5d3]
+    -   @antv/g-plugin-html-renderer@2.0.6
+
 ## 2.0.9
 
 ### Patch Changes
diff --git a/packages/g-webgl/package.json b/packages/g-webgl/package.json
index 93e4f8f2a..c12bdc575 100644
--- a/packages/g-webgl/package.json
+++ b/packages/g-webgl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-webgl",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "A renderer implemented by WebGL1/2",
   "keywords": [
     "antv",
@@ -45,6 +45,7 @@
     "@antv/g-plugin-image-loader": "workspace:*",
     "@antv/util": "^3.3.5",
     "@antv/g-device-api": "^1.6.10",
+    "gl-matrix": "^3.4.3",
     "tslib": "^2.5.3"
   },
   "devDependencies": {
diff --git a/packages/g-webgpu/CHANGELOG.md b/packages/g-webgpu/CHANGELOG.md
index d0e93e755..00c1af897 100644
--- a/packages/g-webgpu/CHANGELOG.md
+++ b/packages/g-webgpu/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-webgpu
 
+## 2.0.10
+
+### Patch Changes
+
+-   Updated dependencies [756ba5d3]
+    -   @antv/g-plugin-html-renderer@2.0.6
+
 ## 2.0.9
 
 ### Patch Changes
diff --git a/packages/g-webgpu/package.json b/packages/g-webgpu/package.json
index 7a4ccbf3c..33b98c4c8 100644
--- a/packages/g-webgpu/package.json
+++ b/packages/g-webgpu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-webgpu",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "A renderer implemented by WebGPU",
   "keywords": [
     "antv",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 13f26684e..1e4a293e4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1065,6 +1065,9 @@ importers:
       '@antv/util':
         specifier: ^3.3.5
         version: 3.3.5
+      gl-matrix:
+        specifier: ^3.4.3
+        version: 3.4.3
       tslib:
         specifier: ^2.5.3
         version: 2.5.3
diff --git a/site/docs/api/basic/display-object.en.md b/site/docs/api/basic/display-object.en.md
index 74b7dd317..f4a1aefa4 100644
--- a/site/docs/api/basic/display-object.en.md
+++ b/site/docs/api/basic/display-object.en.md
@@ -2,18 +2,18 @@
 title: DisplayObject
 order: 0
 redirect_from:
-    - /en/api/basic
+  - /en/api/basic
 ---
 
 DisplayObject is the base class of all graph like [Group](/en/api/basic/group), [Circle](/en/api/basic/circle), [Text](/en/api/basic/text) etc.
 
 We tried to make it as compatible as possible with [DOM Element](https://developer.mozilla.org/en-US/docs/Web/API/Element), which in addition to reducing learning costs, allows us to take advantage of the existing Web ecosystem by disguising ourselves as a DOM Element, e.g.
 
--   Using CSS selectors for [advanced queries](/en/plugins/css-select).
--   Using Hammer.js for [gesture](/en/api/event#直接使用-hammerjs)
--   Using Interact.js for [Drag'n'Drop and Resize](/en/api/event#直接使用-interactjs)
--   [Taking over D3's rendering implementation](/en/guide/diving-deeper/d3)
--   [Taking over Observable Plot's rendering implementation](/en/guide/diving-deeper/plot)
+- Using CSS selectors for [advanced queries](/en/plugins/css-select).
+- Using Hammer.js for [gesture](/en/api/event#直接使用-hammerjs)
+- Using Interact.js for [Drag'n'Drop and Resize](/en/api/event#直接使用-interactjs)
+- [Taking over D3's rendering implementation](/en/guide/diving-deeper/d3)
+- [Taking over Observable Plot's rendering implementation](/en/guide/diving-deeper/plot)
 
 ## Inherited from
 
@@ -27,10 +27,10 @@ Globally unique identifier, can be queried by [getElementById](/en/api/display-o
 
 ```js
 const circle = new Circle({
-    id: 'my-circle-id',
-    style: {
-        r: 10,
-    },
+  id: 'my-circle-id',
+  style: {
+    r: 10,
+  },
 });
 circle.id; // 'my-circle-id'
 canvas.getElementById('my-circle-id'); // circle
@@ -44,10 +44,10 @@ Graph name, not required to be globally unique, can be queried by [getElementsBy
 
 ```js
 const circle = new Circle({
-    name: 'my-circle-name',
-    style: {
-        r: 10,
-    },
+  name: 'my-circle-name',
+  style: {
+    r: 10,
+  },
 });
 circle.name; // 'my-circle-name'
 canvas.getElementsByName('my-circle-name'); // [circle]
@@ -61,10 +61,10 @@ The class name owned by the graphic, which can be used to get/set the class name
 
 ```js
 const circle = new Circle({
-    className: 'my-circle-classname',
-    style: {
-        r: 10,
-    },
+  className: 'my-circle-classname',
+  style: {
+    r: 10,
+  },
 });
 circle.className; // 'my-circle-classname'
 canvas.getElementsByClassName('my-circle-classname'); // [circle]
@@ -88,8 +88,8 @@ Finally, you can also use `class` as an alias when setting.
 
 ```js
 const group = new Group({
-    class: 'my-classname',
-    // className: 'my-classname'
+  class: 'my-classname',
+  // className: 'my-classname'
 });
 
 group.setAttribute('class', 'my-classname');
@@ -106,10 +106,10 @@ For example, we don't want the following circle to respond to the mouse `mouseen
 
 ```js
 const circle = new Circle({
-    interactive: false,
-    style: {
-        r: 100,
-    },
+  interactive: false,
+  style: {
+    r: 100,
+  },
 });
 
 // or
@@ -128,17 +128,17 @@ The drawing properties are set by `style` and usually contain **generic properti
 
 ```javascript
 const rect = new Rect({
-    style: {
-        // or using attrs
-        x: 200,
-        y: 100,
-        fill: '#1890FF',
-        stroke: '#F04864',
-        lineWidth: 4,
-        width: 300,
-        height: 200,
-        radius: 8,
-    },
+  style: {
+    // or using attrs
+    x: 200,
+    y: 100,
+    fill: '#1890FF',
+    stroke: '#F04864',
+    lineWidth: 4,
+    width: 300,
+    height: 200,
+    radius: 8,
+  },
 });
 ```
 
@@ -146,8 +146,8 @@ Property names can also be hyphenated, so the following writeups are fully equiv
 
 ```js
 const rect = new Rect({
-    'line-width': 4,
-    // lineWidth: 4,
+  'line-width': 4,
+  // lineWidth: 4,
 });
 
 rect.style.lineWidth = 4;
@@ -160,83 +160,43 @@ rect.style.setProperty('line-width', 4);
 
 The initial position of the drawing in the local coordinate system is described by different properties depending on the type of drawing, and can be reset later by [setLocalPosition](/en/api/display-object#panning).
 
-The geometric meaning of "position" is also different for different shapes, e.g.
-
--   Using [cx/cy](/en/api/basic/circle#cx) for [Circle](/en/api/basic/circle) and [Ellipse](/en/api/ellipse).
--   [Group](/en/api/group) [Rect](/en/api/rect)，[Image](/en/api/image) 为左上角顶点位置，使用 [x/y](/en/api/basic/rect#x)
--   [Text](/en/api/basic/text) 为文本锚点位置
--   [Line](/en/api/basic/line)，[Polyline](/en/api/polyline)，[Polygon](/en/api/polygon)，[Path](/en/api/path) 为包围盒左上角顶点位置
-
-Sometimes we need to change the geometric meaning of this `position`, for example to set the center of Rect instead of the top left corner as the `anchor`, we can use [anchor](/en/api/display-object#anchor) to set it to `[0.5, 0.5]`. Note that the coordinates of the graph in the local coordinate system do not change before and after the modification.
-
-For example, we define a circle with a radius of 100, and since the anchor defaults to `[0.5, 0.5]`, we get the coordinates of the circle in the local coordinate system as `[100, 100]`, i.e., the location of the center of the circle.
-
 ```js
 const circle = new Cirle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 100,
+  },
 });
-circle.getLocalPosition(); // [100, 100]，此时为圆心所在位置
-```
-
-If we change the anchor point to `[0, 0]`, the position of the circle in the local coordinate system remains the same, `[100, 100]`, except that this coordinate is no longer the center of the circle, but the upper left corner of the enclosing box of the circle, so that visually the circle is shifted down to the right by a distance of `[100, 100]`.
-
-```js
-circle.style.anchor = [0, 0];
-circle.getLocalPosition(); // [100, 100]，此时为圆包围盒左上角位置
-```
-
-#### anchor
-
-The position of the origin (anchor) of the graph, based on [Geometry Bounds](/en/api/basic/display-object#enclosing-box), is defined in the range `[0, 0] ~ [1, 1]`, where `[0, 0]` represents the upper-left corner of Geometry Bounds and `[1, 1]` represents the lower right corner.
-
-The default anchor points for different shapes are as follows, [example](/en/examples/shape#rect).
-
--   The center of [Circle](/en/api/basic/circle) and [Ellipse](/en/api/ellipse) is `[0.5, 0.5]`
--   The top left corner of [Rect](/en/api/rect), [Image](/en/api/image), [Line](/en/api/basic/line), [Polyline](/en/api/polyline), [Polygon](/en/api/polygon) and [Path](/en/api/path) is `[0, 0]`.
--   We should always use [textBaseline](/en/api/basic/text#textbaseline) and [textAlign](/en/api/basic/text#textalign) to set the anchor of [Text](/en/api/basic/text).
--   Since [Group](/en/api/basic/text) has no geometry bounds, so its anchor is `[0, 0]`.
-
-In addition to using arrays, you can also use space-separated array strings, so the following two ways of writing them are equivalent.
-
-```js
-circle.style.anchor = [0.5, 0.5];
-circle.style.anchor = '0.5 0.5';
+circle.getLocalPosition(); // [0, 0]
 ```
 
-| [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value) |
-| -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ---------------------------------------------------------------------- |
-| `'0 0'`                                                              | all                 | no                                     | no         | `<array>`                                                              |
-
 #### transform
 
 We provide shortcuts for transformations in local coordinate systems, while keeping in line with [CSS Transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform), supporting the following [transform-function transformations function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function).
 
--   Scaling
-    -   scale(x, y)
-    -   scaleX(x)
-    -   scaleY(x)
-    -   scaleZ(z)
-    -   scale3d(x, y, z)
--   Translation, 0 can be used without units, unitless is treated as px, the percentage is relative to the current graph bounding box
-    -   translate(0, 0) translate(0, 30px) translate(100%, 100%)
-    -   translateX(0)
-    -   translateY(0)
-    -   translateZ(0)
-    -   translate3d(0, 0, 0)
--   Rotation, support for deg rad turn, these angular units
-    -   rotate(0.5turn) rotate(30deg) rotate(1rad)
--   Stretch, support deg rad turn these angular units
-    -   skew(ax, ay)
-    -   skewX(a)
-    -   skewY(a)
--   Matrix
-    -   matrix()
-    -   matrix3d()
--   none
+- Scaling
+  - scale(x, y)
+  - scaleX(x)
+  - scaleY(x)
+  - scaleZ(z)
+  - scale3d(x, y, z)
+- Translation, 0 can be used without units, unitless is treated as px, the percentage is relative to the current graph bounding box
+  - translate(0, 0) translate(0, 30px) translate(100%, 100%)
+  - translateX(0)
+  - translateY(0)
+  - translateZ(0)
+  - translate3d(0, 0, 0)
+- Rotation, support for deg rad turn, these angular units
+  - rotate(0.5turn) rotate(30deg) rotate(1rad)
+- Stretch, support deg rad turn these angular units
+  - skew(ax, ay)
+  - skewX(a)
+  - skewY(a)
+- Matrix
+  - matrix()
+  - matrix3d()
+- none
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value) |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ---------------------------------------------------------------------- |
@@ -247,26 +207,26 @@ Since the transformation is performed in a local coordinate system, the followin
 ```js
 // Using transform
 const circle = new Circle({
-    style: {
-        transform: 'translate(100px, 100px)',
-        r: 100,
-    },
+  style: {
+    transform: 'translate(100px, 100px)',
+    r: 100,
+  },
 });
 
 // or set cx/cy directly
 const circle = new Circle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 100,
+  },
 });
 
 // or using transform functions
 const circle = new Circle({
-    style: {
-        r: 100,
-    },
+  style: {
+    r: 100,
+  },
 });
 circle.translateLocal(100, 100);
 ```
@@ -277,13 +237,13 @@ Rotation and scaling centers, also called transform origin, are defined relative
 
 Similar to CSS [transform-origin](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin), the following string writing is supported, separated by spaces.
 
--   One value
-    -   Length in px, e.g. 10px
-    -   Length in %, e.g. 50%
-    -   The keywords left, center, right, top, bottom are expressed as percentages, e.g. left equals 0%, center equals 50%.
--   Two values
-    -   The first is the length in px or %, or one of the left, center, or right keywords
-    -   The second is the length in px or %, or one of the top, center, or bottom keywords
+- One value
+  - Length in px, e.g. 10px
+  - Length in %, e.g. 50%
+  - The keywords left, center, right, top, bottom are expressed as percentages, e.g. left equals 0%, center equals 50%.
+- Two values
+  - The first is the length in px or %, or one of the left, center, or right keywords
+  - The second is the length in px or %, or one of the top, center, or bottom keywords
 
 Therefore the following write-ups are equivalent.
 
@@ -297,12 +257,6 @@ circle.style.transformOrigin = '0 100px'; // The distance to the left edge of th
 
 ⚠️ Writing with three values is not supported at the moment.
 
-As with [anchor](/en/api/basic/display-object#anchor), the default value varies from graph to graph.
-
--   `'center'` in [Circle](/en/api/basic/circle) and [Ellipse](/en/api/ellipse).
--   `'left top'` in [Group](/en/api/basic/text), [Rect](/en/api/rect)，[Image](/en/api/image), [Line](/en/api/basic/line), [Polyline](/en/api/polyline), [Polygon](/en/api/polygon) and [Path](/en/api/path).
--   [Text](/en/api/basic/text) 为文本锚点位置，应该使用 [textBaseline](http://localhost:8000/en/api/basic/text#textbaseline) 与 [textAlign](/en/api/basic/text#textalign) 这两个属性设置，因此设置此属性无效
-
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value) |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ---------------------------------------------------------------------- |
 | -                                                                    | all                 | no                                     | no         | `<transform-origin>`                                                   |
@@ -352,8 +306,8 @@ circle.style.fill = 'rgb(255, 0, 0)';
 
 This attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape.
 
--   `'nonzero'` Default https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero
--   `'evenodd'` https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd
+- `'nonzero'` Default https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero
+- `'evenodd'` https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd
 
 This [example](/en/examples/shape#polygon) shows the fill effects of `'nonzero'` and `'evenodd'` in order.
 
@@ -387,18 +341,6 @@ circle.style.stroke = 'rgb(255, 0, 0)';
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ---------------------------------------------------------------------- |
 | 'none'                                                               | all                 | no                                     | yes        | [\<paint\>](/en/api/css/css-properties-values-api#paint)               |
 
-#### strokeWidth
-
-Alias of [lineWidth](/en/api/basic/display-object#linewidth), and [SVG attribute name](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/ stroke-width).
-
-#### strokeDasharray
-
-Alias of [lineDash](/en/api/basic/display-object#linedash), and [SVG attribute name](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/ stroke-dasharray) to be consistent.
-
-#### strokeDashoffset
-
-Alias of [lineDashOffset](/en/api/basic/display-object#linedash), and [SVG Attribute Name](https://developer.mozilla.org/zh-CN/docs/Web/SVG/ Attribute/stroke-dashoffset) to be consistent.
-
 #### lineWidth
 
 The width of the stroke. Unlike the familiar [CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing), half of the width of the border is inside the graphic and half is outside the graphic. For example, the width of the enclosing box for the circle below is: `r + lineWidth / 2 = 110`
@@ -421,9 +363,9 @@ circle.style.lineWidth = '1px';
 
 Endpoint style, supporting the following values.
 
--   'butt' Default value. The end of the line segment ends in a square.
--   'round' The line segment ends in a circle.
--   'square' The line segment ends in a square, but adds a rectangular area with the same width as the line segment and half the height of the line segment's thickness.
+- 'butt' Default value. The end of the line segment ends in a square.
+- 'round' The line segment ends in a circle.
+- 'square' The line segment ends in a square, but adds a rectangular area with the same width as the line segment and half the height of the line segment's thickness.
 
 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap
 
@@ -431,9 +373,9 @@ https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCa
 
 Supporting the following values.
 
--   'miter' Default. An additional diamond-shaped area is formed by extending the outer edges of the connected sections so that they intersect at a point. The effect of this setting can be seen with the [miterLimit](/en/api/basic/display-object#miterlimit) property.
--   'round' Draws the shape of the corner by filling an additional, circular sector with the center of the circle at the end of the connected section. The radius of the rounded corner is the width of the line segment.
--   'bevel' An additional triangular-base area is filled in at the end of the connected sections, each with its own separate rectangular corner.
+- 'miter' Default. An additional diamond-shaped area is formed by extending the outer edges of the connected sections so that they intersect at a point. The effect of this setting can be seen with the [miterLimit](/en/api/basic/display-object#miterlimit) property.
+- 'round' Draws the shape of the corner by filling an additional, circular sector with the center of the circle at the end of the connected section. The radius of the rounded corner is the width of the line segment.
+- 'bevel' An additional triangular-base area is filled in at the end of the connected sections, each with its own separate rectangular corner.
 
 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineJoin
 
@@ -489,8 +431,8 @@ Finally, shadows can have a very big impact on rendering performance.
 
 We currently support two kinds of shadow.
 
--   `'outer'` Outer Shading, which is also the default value for this property. The shadow appears on the outside of the drawing fill or stroke.
--   `'inner'` Internal shading. As the name implies the shadows are inside the graph, as shown in the figure below.
+- `'outer'` Outer Shading, which is also the default value for this property. The shadow appears on the outside of the drawing fill or stroke.
+- `'inner'` Internal shading. As the name implies the shadows are inside the graph, as shown in the figure below.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*0uHfQa00ZeYAAAAAAAAAAAAAARQnAQ" width="200" alt="inner shadow">
 
@@ -530,10 +472,10 @@ Vertical offset, e.g. a negative number moves the shadow up, a positive number d
 
 Filters can perform some processing on the generated image, such as blurring, highlighting, boosting contrast, etc. The following implementations are available on the web side.
 
--   CSS Filter: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
--   Canvas Filter: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/filter
--   SVG Filter: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter
--   Post Processing in WebGL.
+- CSS Filter: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
+- Canvas Filter: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/filter
+- SVG Filter: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter
+- Post Processing in WebGL.
 
 Referring to the CSS Filter syntax, we support applying one or more filter effects to a shape, [example](/en/examples/shape#filter).
 
@@ -546,10 +488,10 @@ circle.style.filter = 'blur(5px) brightness(0.4)'; // Stackable
 
 Filters can currently be used in the g-canvas/svg/webgl renderer with the following caveats.
 
--   Due to poor Canvas Filter support, mainly [Safari does not support](https://caniuse.com/mdn-api_canvasrenderingcontext2d_filter), filters are not displayed properly in Safari using g-canvas
--   g-canvas and g-svg differ slightly in some filter effects
--   Can be applied to all base graphs and Groups
--   This property does not support animation at this time
+- Due to poor Canvas Filter support, mainly [Safari does not support](https://caniuse.com/mdn-api_canvasrenderingcontext2d_filter), filters are not displayed properly in Safari using g-canvas
+- g-canvas and g-svg differ slightly in some filter effects
+- Can be applied to all base graphs and Groups
+- This property does not support animation at this time
 
 #### blur
 
@@ -582,10 +524,10 @@ The following figure shows the bright effects of 0 100% and 200% in order, [exam
 
 To display the shadows under the image, you can set the shadow color, offset and blur effect by passing in the following parameters in order.
 
--   offset-x Describes the horizontal offset distance of the shadow in px
--   offset-y Describes the vertical offset distance of the shadow in px
--   blur-radius The larger the value, the more ambiguous it is, in px, no negative numbers allowed
--   color
+- offset-x Describes the horizontal offset distance of the shadow in px
+- offset-y Describes the vertical offset distance of the shadow in px
+- blur-radius The larger the value, the more ambiguous it is, in px, no negative numbers allowed
+- color
 
 The shading does not affect the size of the geometry bounding box of the graph.
 
@@ -759,19 +701,19 @@ For example, if we want to create a picture that is cropped into a circle, so th
 
 ```js
 const image = new Image({
-    style: {
-        x: 0,
-        y: 0,
-        width: 200,
-        height: 200,
-        clipPath: new Circle({
-            style: {
-                cx: 100,
-                cy: 100,
-                r: 50,
-            },
-        }),
-    },
+  style: {
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 200,
+    clipPath: new Circle({
+      style: {
+        cx: 100,
+        cy: 100,
+        r: 50,
+      },
+    }),
+  },
 });
 ```
 
@@ -779,27 +721,27 @@ It is also possible to set the cropping area after creating the drawing, so the
 
 ```js
 const image = new Image({
-    style: {
-        //...
-    },
+  style: {
+    //...
+  },
 });
 
 image.style.clipPath = new Circle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 50,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 50,
+  },
 });
 // or
 image.setClip(
-    new Circle({
-        style: {
-            cx: 100,
-            cy: 100,
-            r: 50,
-        },
-    }),
+  new Circle({
+    style: {
+      cx: 100,
+      cy: 100,
+      r: 50,
+    },
+  }),
 );
 ```
 
@@ -820,11 +762,11 @@ The crop area graphic itself is also supported to modify the property, and affec
 ```js
 // Apply animation to clipped areas
 clipPathCircle.animate(
-    [{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }],
-    {
-        duration: 1500,
-        iterations: Infinity,
-    },
+  [{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }],
+  {
+    duration: 1500,
+    iterations: Infinity,
+  },
 );
 ```
 
@@ -836,27 +778,27 @@ In [path-animation](/en/api/animation/waapi#path-animation), we can use `offsetP
 
 ```js
 const circle = new Circle({
-    style: {
-        offsetPath: new Line({
-            style: {
-                // There is no need to set other drawing properties that are not related to trajectories
-                x1: 100,
-                y1: 100,
-                x2: 300,
-                y2: 100,
-            },
-        }),
-        r: 10,
-    },
+  style: {
+    offsetPath: new Line({
+      style: {
+        // There is no need to set other drawing properties that are not related to trajectories
+        x1: 100,
+        y1: 100,
+        x2: 300,
+        y2: 100,
+      },
+    }),
+    r: 10,
+  },
 });
 
 const animation = circle.animate(
-    [{ offsetDistance: 0 }, { offsetDistance: 1 }],
-    {
-        duration: 3000,
-        easing: 'ease-in-out',
-        iterations: Infinity,
-    },
+  [{ offsetDistance: 0 }, { offsetDistance: 1 }],
+  {
+    duration: 3000,
+    easing: 'ease-in-out',
+    iterations: Infinity,
+  },
 );
 ```
 
@@ -880,10 +822,10 @@ The values supported by the `cursor` property can be found at https://developer.
 
 ```js
 const circle = new Circle({
-    style: {
-        //...
-        cursor: 'pointer',
-    },
+  style: {
+    //...
+    cursor: 'pointer',
+  },
 });
 ```
 
@@ -897,25 +839,25 @@ To set how the graph responds to interaction events, see. https://developer.mozi
 
 简而言之，[fill](/en/api/basic/display-object#fill) [stroke](/en/api/basic/display-object#stroke) 和 [visibility](/en/api/basic/display-object#visibility) 都可以独立或组合影响拾取判定行为。目前支持以下关键词：
 
--   `'auto'` Default value, equivalent to `'visiblepainted'`.
--   `'none'` Will never be the target of a response event.
--   `'visiblepainted'` The following conditions are met before the event is responded to.
-    -   [visibility](/en/api/basic/display-object#visibility) takes `'visible'` which means the graph is visible.
-    -   Trigger while [fill](/en/api/basic/display-object#fill) takes a value other than `'none'` in the graphics fill area. Or [stroke](/en/api/basic/display-object#stroke) takes a value other than `'none'` when triggered in the drawing stroke area.
--   `'visiblefill'` The following conditions are met before the event is responded to.
-    -   [visibility](/en/api/basic/display-object#visibility) takes `'visible'` which means the graph is visible an not affected by the value of [fill](/en/api/basic/display-object#fill).
--   `'visiblestroke'` The following conditions are met before the event is responded to.
-    -   [visibility](/en/api/basic/display-object#visibility) takes `'visible'` which means the graph is visible an not affected by the value of [stroke](/en/api/basic/display-object#stroke).
--   `'visible'` The following conditions are met before the event is responded to.
-    -   [visibility](/en/api/basic/display-object#visibility) takes `'visible'`.
-    -   Triggered in drawing fill or stroke area, not affected by [fill](/en/api/basic/display-object#fill) and [stroke](/en/api/basic/display-object#stroke) values.
--   `'painted'` The following conditions are met before the event is responded to.
-    -   Trigger while [fill](/en/api/basic/display-object#fill) takes a value other than `'none'` in the graphics fill area. Or [stroke](/en/api/basic/display-object#stroke) takes a value other than `'none'` when the drawing stroke area is triggered. Not affected by the value of [visibility](/en/api/basic/display-object#visibility).
--   `'fill'` The following conditions are met before the event is responded to.
-    -   Triggered in graphics fill area, not affected by [fill](/en/api/basic/display-object#fill) and [visibility](/en/api/basic/display-object#visibility) values.
--   `'stroke'` The following conditions are met before the event is responded to.
-    -   Triggered in graphics fill area, not affected by [stroke](/en/api/basic/display-object#stroke) and [visibility](/en/api/basic/display-object#visibility) values.
--   `'all'` The events are responded to whenever the fill and stroke areas of the drawing are entered. So it will not be affected by [fill](/en/api/basic/display-object#fill) [stroke](/en/api/basic/display-object#stroke) [visibility](/en/api/ basic/display-object#visibility) is affected by the value of
+- `'auto'` Default value, equivalent to `'visiblepainted'`.
+- `'none'` Will never be the target of a response event.
+- `'visiblepainted'` The following conditions are met before the event is responded to.
+  - [visibility](/en/api/basic/display-object#visibility) takes `'visible'` which means the graph is visible.
+  - Trigger while [fill](/en/api/basic/display-object#fill) takes a value other than `'none'` in the graphics fill area. Or [stroke](/en/api/basic/display-object#stroke) takes a value other than `'none'` when triggered in the drawing stroke area.
+- `'visiblefill'` The following conditions are met before the event is responded to.
+  - [visibility](/en/api/basic/display-object#visibility) takes `'visible'` which means the graph is visible an not affected by the value of [fill](/en/api/basic/display-object#fill).
+- `'visiblestroke'` The following conditions are met before the event is responded to.
+  - [visibility](/en/api/basic/display-object#visibility) takes `'visible'` which means the graph is visible an not affected by the value of [stroke](/en/api/basic/display-object#stroke).
+- `'visible'` The following conditions are met before the event is responded to.
+  - [visibility](/en/api/basic/display-object#visibility) takes `'visible'`.
+  - Triggered in drawing fill or stroke area, not affected by [fill](/en/api/basic/display-object#fill) and [stroke](/en/api/basic/display-object#stroke) values.
+- `'painted'` The following conditions are met before the event is responded to.
+  - Trigger while [fill](/en/api/basic/display-object#fill) takes a value other than `'none'` in the graphics fill area. Or [stroke](/en/api/basic/display-object#stroke) takes a value other than `'none'` when the drawing stroke area is triggered. Not affected by the value of [visibility](/en/api/basic/display-object#visibility).
+- `'fill'` The following conditions are met before the event is responded to.
+  - Triggered in graphics fill area, not affected by [fill](/en/api/basic/display-object#fill) and [visibility](/en/api/basic/display-object#visibility) values.
+- `'stroke'` The following conditions are met before the event is responded to.
+  - Triggered in graphics fill area, not affected by [stroke](/en/api/basic/display-object#stroke) and [visibility](/en/api/basic/display-object#visibility) values.
+- `'all'` The events are responded to whenever the fill and stroke areas of the drawing are entered. So it will not be affected by [fill](/en/api/basic/display-object#fill) [stroke](/en/api/basic/display-object#stroke) [visibility](/en/api/ basic/display-object#visibility) is affected by the value of
 
 In this [example](/en/examples/shape#circle), we set the property to `stroke`, so the filled area will not respond to events.
 
@@ -1030,7 +972,7 @@ In 2D scenes, stretching can be performed to distort each point on an element in
 
 ### Set the scaling and rotation center
 
-Besides using the [transformOrigin](/en/api/basic/display-object#transformorigin) property, you can also manually calculate the offset relative to the [anchor](/en/api/basic/display-object#anchor) position and then reset the transform center by `setOrigin`.
+Using the [transformOrigin](/en/api/basic/display-object#transformorigin) property, you can also use `setOrigin`.
 
 | method name | parameters                                                                                       | return value | remarks                                                             |
 | ----------- | ------------------------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------- |
@@ -1039,35 +981,33 @@ Besides using the [transformOrigin](/en/api/basic/display-object#transformorigin
 
 Set the center of scaling and rotation in the local coordinate system, [example](/en/examples/scenegraph#origin).
 
-The value is the offset relative to [anchor](/en/api/basic/display-object#anchor), the default value is `[0, 0]`, so that is the anchor position.
+The default value is `[0, 0]`.
 
 In the following example, we have placed a circle with a radius of 100 at `[100, 100]`.
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 100,
+  },
 });
 ```
 
-If we want the circle to be scaled with the center of the circle as the center of transformation, since the anchor point is the center of the circle at this point, the position of the anchor point in the world coordinate system remains the same before and after scaling, and it is the enclosing box that changes.
+If we want the circle to be scaled with the center of the circle as the center of transformation, and it is the enclosing box that changes.
 
 ```js
-circle.setOrigin(0, 0);
+circle.setOrigin(100, 100);
 circle.scale(0.5);
-circle.getPosition(); // [100, 100]
 circle.getBounds(); // { center: [100, 100], halfExtents: [50, 50] }
 ```
 
-But if we want the circle to be scaled by its own upper left corner of the bounding box, i.e. shifted by `[-100, -100]` with respect to the current anchor point (the center of the circle). After scaling, the anchor point is also shifted, and the circle's position in the world coordinate system comes to `[50, 50]`. Similarly, the center point of the enclosing box is shifted by.
+But if we want the circle to be scaled by its own upper left corner of the bounding box:
 
 ```js
-circle.setOrigin(-100, -100);
+circle.setOrigin(0, 0);
 circle.scale(0.5);
-circle.getPosition(); // [50, 50]
 circle.getBounds(); // { center: [50, 50], halfExtents: [50, 50] }
 ```
 
@@ -1075,11 +1015,11 @@ In the following [example](/en/examples/scenegraph#origin), we have created a re
 
 ```js
 const rect = new Rect({
-    id: 'rect',
-    style: {
-        width: 300,
-        height: 200,
-    },
+  id: 'rect',
+  style: {
+    width: 300,
+    height: 200,
+  },
 });
 rect.setOrigin(150, 100); // Set the rotation and scaling center to the center point of its own bounding box
 ```
@@ -1088,14 +1028,14 @@ For example, if we want to modify the transformation center of a circle to the u
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 100,
+  },
 });
 
-circle.setOrigin(-100, -100); // Offset relative to anchor point (center of circle) [-100, -100]
+circle.setOrigin(0, 0);
 // or
 circle.style.transformOrigin = 'left top';
 // or
@@ -1116,13 +1056,13 @@ Gets the geometric bouding box of the base drawing, which is independent of othe
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100, // Coordinates in the local coordinate system do not affect Geometry Bounds
-        cy: 100, // Coordinates in the local coordinate system do not affect Geometry Bounds
-        r: 100,
-        lineWidth: 20, // Style properties do not affect Geometry Bounds
-        shadowBlur: 10, // Style properties do not affect Geometry Bounds
-    },
+  style: {
+    cx: 100, // Coordinates in the local coordinate system do not affect Geometry Bounds
+    cy: 100, // Coordinates in the local coordinate system do not affect Geometry Bounds
+    r: 100,
+    lineWidth: 20, // Style properties do not affect Geometry Bounds
+    shadowBlur: 10, // Style properties do not affect Geometry Bounds
+  },
 });
 circle.getGeometryBounds(); // { center: [0, 0], halfExtents: [100, 100] }
 ```
@@ -1140,11 +1080,11 @@ This should be the most common way of calculating the Geometry Bounds of itself
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100, // Applying transformations in the world coordinate system
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100, // Applying transformations in the world coordinate system
+    cy: 100,
+    r: 100,
+  },
 });
 circle.getBounds(); // { center: [100, 100], halfExtents: [100, 100] }
 ```
@@ -1155,12 +1095,12 @@ Merge the Render Bounds of itself and its children in the world coordinate syste
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100, // Applying transformations in the world coordinate system
-        cy: 100,
-        r: 100,
-        lineWidth: 20,
-    },
+  style: {
+    cx: 100, // Applying transformations in the world coordinate system
+    cy: 100,
+    r: 100,
+    lineWidth: 20,
+  },
 });
 // r + lineWidth / 2
 circle.getRenderBounds(); // { center: [100, 100], halfExtents: [110, 110] }
@@ -1176,12 +1116,12 @@ Compatible with [SVG method of the same name](https://developer.mozilla.org/en-U
 
 ```js
 interface DOMRect {
-    top: number;
-    left: number;
-    right: number;
-    bottom: number;
-    width: number;
-    height: number;
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
 }
 ```
 
@@ -1317,15 +1257,15 @@ clonedCircle.getPosition(); // [10, 20]
 
 Caveats:
 
--   Deep copy support, i.e. itself and the whole subtree
--   The cloned node does not retain the parent-child relationship of the original node and needs to be added to the canvas using `appendChild` before it will be rendered
--   Consistent with the [DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode#notes), event listeners on the original drawing are not copied
+- Deep copy support, i.e. itself and the whole subtree
+- The cloned node does not retain the parent-child relationship of the original node and needs to be added to the canvas using `appendChild` before it will be rendered
+- Consistent with the [DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode#notes), event listeners on the original drawing are not copied
 
 In this [example](/en/examples/scenegraph#clone), we demonstrate the above features.
 
--   The style properties of the original node can be changed at any time, and the copy obtained will be up-to-date, and the new node will also need to be added to the scene graph before it will be rendered
--   However, since no event listeners will be copied, only the original node can be dragged
--   In non-deep copy mode, Text (Drag me Text) is not copied as a child of Circle
+- The style properties of the original node can be changed at any time, and the copy obtained will be up-to-date, and the new node will also need to be added to the scene graph before it will be rendered
+- However, since no event listeners will be copied, only the original node can be dragged
+- In non-deep copy mode, Text (Drag me Text) is not copied as a child of Circle
 
 ![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*PwEYSI_ijPEAAAAAAAAAAAAAARQnAQ)
 
@@ -1340,19 +1280,19 @@ In this [example](/en/examples/scenegraph#clone), we demonstrate the above featu
 
 ⚠️ Compatible with [HTMLElement Style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style):
 
--   style.[getPropertyValue](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)
--   style.[setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)
--   style.[removeProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty)
+- style.[getPropertyValue](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)
+- style.[setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)
+- style.[removeProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty)
 
 The following usage equivalents.
 
 ```js
 const circle = new Circle({
-    style: {
-        // or using attrs
-        r: 10,
-        fill: 'red',
-    },
+  style: {
+    // or using attrs
+    r: 10,
+    fill: 'red',
+  },
 });
 
 // get attribute value
@@ -1381,8 +1321,8 @@ Note that currently, when using [animation](/en/api/animation/waapi), we also co
 
 ```js
 animation.onframe = () => {
-    rect.style.width; // '100px'
-    rect.parsedStyle.width; // CSSUnitValue { unit: 'px', value: 100 }
+  rect.style.width; // '100px'
+  rect.parsedStyle.width; // CSSUnitValue { unit: 'px', value: 100 }
 };
 ```
 
@@ -1451,18 +1391,18 @@ In addition to interactive events such as click and mouseenter, we also provide
 import { ElementEvent, MutationEvent } from '@antv/g';
 
 child.on(ElementEvent.INSERTED, (e: MutationEvent) => {
-    e.target; // child
-    e.relatedNode; // parent
+  e.target; // child
+  e.relatedNode; // parent
 });
 child.on(ElementEvent.REMOVED, (e) => {
-    e.target; // child
-    e.relatedNode; // parent
+  e.target; // child
+  e.relatedNode; // parent
 });
 child.on(ElementEvent.ATTR_MODIFIED, (e) => {
-    e.target; // child
-    e.attrName;
-    e.prevValue;
-    e.newValue;
+  e.target; // child
+  e.attrName;
+  e.prevValue;
+  e.newValue;
 });
 
 parent.appendChild(child);
@@ -1470,12 +1410,12 @@ parent.appendChild(child);
 
 We currently support the following scenario map related events.
 
--   `INSERTED` Triggered when added as a child node
--   `REMOVED` Triggered when removed as a child node
--   `MOUNTED` Triggered when first entering the canvas
--   `UNMOUNTED` Triggered when removed from the canvas
--   `ATTR_MODIFIED` Triggered when modifying properties
--   `DESTROY` Triggered on destruction
+- `INSERTED` Triggered when added as a child node
+- `REMOVED` Triggered when removed as a child node
+- `MOUNTED` Triggered when first entering the canvas
+- `UNMOUNTED` Triggered when removed from the canvas
+- `ATTR_MODIFIED` Triggered when modifying properties
+- `DESTROY` Triggered on destruction
 
 ## Animation
 
@@ -1483,19 +1423,19 @@ Referring to the Web Animations API, you can use animate to complete the keyfram
 
 ```js
 circle.animate(
-    [
-        {
-            transform: 'scale(0)',
-        },
-        {
-            transform: 'scale(1)',
-        },
-    ],
+  [
+    {
+      transform: 'scale(0)',
+    },
     {
-        duration: 500,
-        easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-        iterations: Infinity,
+      transform: 'scale(1)',
     },
+  ],
+  {
+    duration: 500,
+    easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+    iterations: Infinity,
+  },
 );
 ```
 
diff --git a/site/docs/api/basic/display-object.zh.md b/site/docs/api/basic/display-object.zh.md
index 9c013e79d..c9818033d 100644
--- a/site/docs/api/basic/display-object.zh.md
+++ b/site/docs/api/basic/display-object.zh.md
@@ -2,18 +2,18 @@
 title: DisplayObject
 order: 0
 redirect_from:
-    - /zh/api/basic
+  - /zh/api/basic
 ---
 
 DisplayObject 是所有图形的基类，例如 [Group](/zh/api/basic/group) [Circle](/zh/api/basic/circle) [Text](/zh/api/basic/text) 等都会继承它。
 
 我们尝试让它尽可能兼容 [DOM Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)，除了能降低学习成本，还能将自身伪装成 DOM Element 来充分利用已有的 Web 生态，例如：
 
--   使用 CSS 选择器进行[高级查询](/zh/plugins/css-select)
--   使用 Hammer.js [扩展手势](/zh/api/event#直接使用-hammerjs)
--   使用 Interact.js [实现 Drag&Drop，Resize](/zh/api/event#直接使用-interactjs)
--   保留 D3 的数据处理，[替换渲染层](/zh/guide/diving-deeper/d3)
--   保留 Observable Plot 的数据处理，[替换渲染层](/zh/guide/diving-deeper/plot)
+- 使用 CSS 选择器进行[高级查询](/zh/plugins/css-select)
+- 使用 Hammer.js [扩展手势](/zh/api/event#直接使用-hammerjs)
+- 使用 Interact.js [实现 Drag&Drop，Resize](/zh/api/event#直接使用-interactjs)
+- 保留 D3 的数据处理，[替换渲染层](/zh/guide/diving-deeper/d3)
+- 保留 Observable Plot 的数据处理，[替换渲染层](/zh/guide/diving-deeper/plot)
 
 ## 继承自
 
@@ -27,10 +27,10 @@ https://developer.mozilla.org/en-US/docs/Web/API/Element/id
 
 ```js
 const circle = new Circle({
-    id: 'my-circle-id',
-    style: {
-        r: 10,
-    },
+  id: 'my-circle-id',
+  style: {
+    r: 10,
+  },
 });
 circle.id; // 'my-circle-id'
 canvas.getElementById('my-circle-id'); // circle
@@ -44,10 +44,10 @@ https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
 
 ```js
 const circle = new Circle({
-    name: 'my-circle-name',
-    style: {
-        r: 10,
-    },
+  name: 'my-circle-name',
+  style: {
+    r: 10,
+  },
 });
 circle.name; // 'my-circle-name'
 canvas.getElementsByName('my-circle-name'); // [circle]
@@ -61,10 +61,10 @@ https://developer.mozilla.org/en-US/docs/Web/API/Element/className
 
 ```js
 const circle = new Circle({
-    className: 'my-circle-classname',
-    style: {
-        r: 10,
-    },
+  className: 'my-circle-classname',
+  style: {
+    r: 10,
+  },
 });
 circle.className; // 'my-circle-classname'
 canvas.getElementsByClassName('my-circle-classname'); // [circle]
@@ -88,8 +88,8 @@ group.className; // ''
 
 ```js
 const group = new Group({
-    class: 'my-classname',
-    // className: 'my-classname'
+  class: 'my-classname',
+  // className: 'my-classname'
 });
 
 group.setAttribute('class', 'my-classname');
@@ -107,10 +107,10 @@ group.class;
 ```js
 // 初始化时禁止交互
 const circle = new Circle({
-    interactive: false,
-    style: {
-        r: 100,
-    },
+  interactive: false,
+  style: {
+    r: 100,
+  },
 });
 
 // 或者后续禁止
@@ -129,17 +129,17 @@ circle.style.pointerEvents = 'none';
 
 ```javascript
 const rect = new Rect({
-    style: {
-        // 或者使用 attrs
-        x: 200,
-        y: 100,
-        fill: '#1890FF',
-        stroke: '#F04864',
-        lineWidth: 4,
-        width: 300,
-        height: 200,
-        radius: 8,
-    },
+  style: {
+    // 或者使用 attrs
+    x: 200,
+    y: 100,
+    fill: '#1890FF',
+    stroke: '#F04864',
+    lineWidth: 4,
+    width: 300,
+    height: 200,
+    radius: 8,
+  },
 });
 ```
 
@@ -147,8 +147,8 @@ const rect = new Rect({
 
 ```js
 const rect = new Rect({
-    'line-width': 4,
-    // lineWidth: 4,
+  'line-width': 4,
+  // lineWidth: 4,
 });
 
 rect.style.lineWidth = 4;
@@ -161,83 +161,32 @@ rect.style.setProperty('line-width', 4);
 
 图形在局部坐标系下的初始位置，根据图形种类使用不同属性描述，后续也可以通过 [setLocalPosition](/zh/api/display-object#平移) 重新设置。
 
-对于不同的图形，“位置”的几何意义也不同，例如：
-
--   [Circle](/zh/api/basic/circle)，[Ellipse](/zh/api/ellipse) 为圆心位置，使用 [cx/cy](/zh/api/basic/circle#cx)
--   [Group](/zh/api/group) [Rect](/zh/api/rect)，[Image](/zh/api/image) 为左上角顶点位置，使用 [x/y](/zh/api/basic/rect#x)
--   [Text](/zh/api/basic/text) 为文本锚点位置
--   [Line](/zh/api/basic/line)，[Polyline](/zh/api/polyline)，[Polygon](/zh/api/polygon)，[Path](/zh/api/path) 为包围盒左上角顶点位置
-
-有时我们需要更改这个 “位置” 的几何意义，例如将 Rect 的中心而非左上角设置成 “锚点”，此时我们可以使用 [anchor](/zh/api/display-object#anchor)，将它设置成 `[0.5, 0.5]`。需要注意的是，修改前后图形在局部坐标系下的坐标并不会改变。
-
-举例来说，我们定义了一个半径为 100 的圆，由于 anchor 默认值为 `[0.5, 0.5]`，此时获取这个圆在局部坐标系的坐标为 `[100, 100]`，即圆心所在的位置：
-
-```js
-const circle = new Cirle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 100,
-    },
-});
-circle.getLocalPosition(); // [100, 100]，此时为圆心所在位置
-```
-
-如果我们此时修改锚点为 `[0, 0]`，这个圆局部坐标系下位置依然不变，还是 `[100, 100]`，只是此时这个坐标不再是圆心，而是圆的包围盒左上角，因此从视觉上看，这个圆向右下方平移了 `[100, 100]` 的距离：
-
-```js
-circle.style.anchor = [0, 0];
-circle.getLocalPosition(); // [100, 100]，此时为圆包围盒左上角位置
-```
-
-#### anchor
-
-图形的原点（锚点）位置，基于 [Geometry Bounds](/zh/api/basic/display-object#包围盒) 定义，取值范围 `[0, 0] ~ [1, 1]`，其中 `[0, 0]` 代表 Geometry Bounds 左上角，`[1, 1]` 代表右下角。
-
-不同图形的默认锚点如下，[示例](/zh/examples/shape#rect)：
-
--   [Circle](/zh/api/basic/circle)，[Ellipse](/zh/api/ellipse) 为圆心位置 `[0.5, 0.5]`
--   [Rect](/zh/api/rect)，[Image](/zh/api/image)，[Line](/zh/api/basic/line)，[Polyline](/zh/api/polyline)，[Polygon](/zh/api/polygon)，[Path](/zh/api/path) 为包围盒左上角顶点位置 `[0, 0]`
--   [Text](/zh/api/basic/text) 为文本锚点位置，应该使用 [textBaseline](http://localhost:8000/zh/api/basic/text#textbaseline) 与 [textAlign](/zh/api/basic/text#textalign) 这两个属性设置，因此设置此属性无效
--   [Group](/zh/api/basic/text) 无几何定义，因此设置此属性无效
-
-除了使用数组，还可以使用空格分隔的数组字符串，因此以下两种写法等价：
-
-```js
-circle.style.anchor = [0.5, 0.5];
-circle.style.anchor = '0.5 0.5';
-```
-
-| [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value) |
-| ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | -------------------------------------------------------------- |
-| `'0 0'`                                                       | 所有     | 否                                    | 否           | `<array>`                                                      |
-
 #### transform
 
 我们提供了在局部坐标系下进行变换的快捷方式，同时与 [CSS Transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 保持一致，支持以下[transform-function 变换函数](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function)：
 
--   缩放，无单位
-    -   scale(x, y)
-    -   scaleX(x)
-    -   scaleY(x)
-    -   scaleZ(z)
-    -   scale3d(x, y, z)
--   平移，0 可以不加单位，无单位当作 px 处理，百分比相对于当前图形包围盒
-    -   translate(0, 0) translate(0, 30px) translate(100%, 100%)
-    -   translateX(0)
-    -   translateY(0)
-    -   translateZ(0)
-    -   translate3d(0, 0, 0)
--   旋转，支持 deg rad turn 这些角度单位
-    -   rotate(0.5turn) rotate(30deg) rotate(1rad)
--   拉伸，支持 deg rad turn 这些角度单位
-    -   skew(ax, ay)
-    -   skewX(a)
-    -   skewY(a)
--   矩阵
-    -   matrix()
-    -   matrix3d()
--   none 清除变换
+- 缩放，无单位
+  - scale(x, y)
+  - scaleX(x)
+  - scaleY(x)
+  - scaleZ(z)
+  - scale3d(x, y, z)
+- 平移，0 可以不加单位，无单位当作 px 处理，百分比相对于当前图形包围盒
+  - translate(0, 0) translate(0, 30px) translate(100%, 100%)
+  - translateX(0)
+  - translateY(0)
+  - translateZ(0)
+  - translate3d(0, 0, 0)
+- 旋转，支持 deg rad turn 这些角度单位
+  - rotate(0.5turn) rotate(30deg) rotate(1rad)
+- 拉伸，支持 deg rad turn 这些角度单位
+  - skew(ax, ay)
+  - skewX(a)
+  - skewY(a)
+- 矩阵
+  - matrix()
+  - matrix3d()
+- none 清除变换
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value) |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | -------------------------------------------------------------- |
@@ -248,26 +197,26 @@ circle.style.anchor = '0.5 0.5';
 ```js
 // 使用 transform 属性
 const circle = new Circle({
-    style: {
-        transform: 'translate(100px, 100px)',
-        r: 100,
-    },
+  style: {
+    transform: 'translate(100px, 100px)',
+    r: 100,
+  },
 });
 
 // 直接设置 cx/cy
 const circle = new Circle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 100,
+  },
 });
 
 // 使用变换方法
 const circle = new Circle({
-    style: {
-        r: 100,
-    },
+  style: {
+    r: 100,
+  },
 });
 circle.translateLocal(100, 100);
 ```
@@ -278,13 +227,13 @@ circle.translateLocal(100, 100);
 
 和 CSS [transform-origin](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin) 类似，支持以下字符串写法，其中用空格分隔：
 
--   一个值
-    -   单位为 px 的长度，例如 10px
-    -   单位为 % 的长度，例如 50%
-    -   关键词 left, center, right, top, bottom，等于用百分比表示，例如 left 等于 0%，center 等于 50%
--   两个值
-    -   第一个是单位为 px 或 % 的长度，或 left, center, right 关键字中的一个
-    -   第二个是单位为 px 或 % 的长度，或 top, center, bottom 关键字中的一个
+- 一个值
+  - 单位为 px 的长度，例如 10px
+  - 单位为 % 的长度，例如 50%
+  - 关键词 left, center, right, top, bottom，等于用百分比表示，例如 left 等于 0%，center 等于 50%
+- 两个值
+  - 第一个是单位为 px 或 % 的长度，或 left, center, right 关键字中的一个
+  - 第二个是单位为 px 或 % 的长度，或 top, center, bottom 关键字中的一个
 
 因此以下写法等价：
 
@@ -298,11 +247,9 @@ circle.style.transformOrigin = '0 100px'; // 包围盒水平方向左侧边缘
 
 ⚠️ 暂不支持三个值的写法。
 
-和 [anchor](/zh/api/basic/display-object#anchor) 一样，不同图形的默认值也不同：
+不同图形的默认值也不同：
 
--   [Circle](/zh/api/basic/circle)，[Ellipse](/zh/api/ellipse) 为 `'center'`
--   [Group](/zh/api/basic/text) [Rect](/zh/api/rect)，[Image](/zh/api/image)，[Line](/zh/api/basic/line)，[Polyline](/zh/api/polyline)，[Polygon](/zh/api/polygon)，[Path](/zh/api/path) 为包围盒左上角顶点位置 `'left top'`
--   [Text](/zh/api/basic/text) 为文本锚点位置，应该使用 [textBaseline](http://localhost:8000/zh/api/basic/text#textbaseline) 与 [textAlign](/zh/api/basic/text#textalign) 这两个属性设置，因此设置此属性无效
+- [Text](/zh/api/basic/text) 为文本锚点位置，应该使用 [textBaseline](http://localhost:8000/zh/api/basic/text#textbaseline) 与 [textAlign](/zh/api/basic/text#textalign) 这两个属性设置，因此设置此属性无效
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value) |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | -------------------------------------------------------------- |
@@ -353,8 +300,8 @@ circle.style.fill = 'rgb(255, 0, 0)';
 
 该属性定义了用来确定一个多边形内部区域的算法，支持以下取值：
 
--   `'nonzero'` 默认值 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule#nonzero
--   `'evenodd'` https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule#evenodd
+- `'nonzero'` 默认值 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule#nonzero
+- `'evenodd'` https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule#evenodd
 
 该 [示例](/zh/examples/shape#polygon) 依次展示了 `'nonzero'` 和 `'evenodd'` 的填充效果：
 
@@ -388,18 +335,6 @@ circle.style.stroke = 'rgb(255, 0, 0)';
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | -------------------------------------------------------------- |
 | 'none'                                                        | 所有     | 否                                    | 是           | [\<paint\>](/zh/api/css/css-properties-values-api#paint)       |
 
-#### strokeWidth
-
-[lineWidth](/zh/api/basic/display-object#linewidth) 的别名，和 [SVG 属性名](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-width)保持一致。
-
-#### strokeDasharray
-
-[lineDash](/zh/api/basic/display-object#linedash) 的别名，和 [SVG 属性名](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray)保持一致。
-
-#### strokeDashoffset
-
-[lineDashOffset](/zh/api/basic/display-object#linedash) 的别名，和 [SVG 属性名](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset)保持一致。
-
 #### lineWidth
 
 描边宽度。与我们熟悉的 [CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) 不同，边框的一半宽度在图形内，一半在图形外。例如下面这个圆的包围盒宽度为：`r + lineWidth / 2 = 110`
@@ -422,9 +357,9 @@ circle.style.lineWidth = '1px';
 
 端点样式，支持以下取值：
 
--   'butt' 默认值。线段末端以方形结束。
--   'round' 线段末端以圆形结束。
--   'square' 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
+- 'butt' 默认值。线段末端以方形结束。
+- 'round' 线段末端以圆形结束。
+- 'square' 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
 
 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap
 
@@ -432,9 +367,9 @@ https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCa
 
 连接处样式，支持以下取值：
 
--   'miter' 默认值。通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 [miterLimit](/zh/api/basic/display-object#miterlimit) 属性看到效果。
--   'round' 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
--   'bevel' 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
+- 'miter' 默认值。通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 [miterLimit](/zh/api/basic/display-object#miterlimit) 属性看到效果。
+- 'round' 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
+- 'bevel' 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
 
 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineJoin
 
@@ -490,8 +425,8 @@ circle.getBounds(); // { halfExtents: [100, 100] }
 
 目前我们支持两种阴影：
 
--   `'outer'` 外阴影，也是该属性的默认值。阴影出现在图形填充或者描边的外侧。
--   `'inner'` 内阴影。顾名思义阴影在图形内部，如下图所示。
+- `'outer'` 外阴影，也是该属性的默认值。阴影出现在图形填充或者描边的外侧。
+- `'inner'` 内阴影。顾名思义阴影在图形内部，如下图所示。
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*0uHfQa00ZeYAAAAAAAAAAAAAARQnAQ" width="200" alt="inner shadow">
 
@@ -531,10 +466,10 @@ circle.getBounds(); // { halfExtents: [100, 100] }
 
 滤镜（Filter）可以对已生成的图像进行一些处理，例如模糊、高亮、提升对比度等。在 Web 端有以下实现：
 
--   CSS Filter：https://developer.mozilla.org/en-US/docs/Web/CSS/filter
--   Canvas Filter：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/filter
--   SVG Filter：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter
--   WebGL 中一般称作后处理
+- CSS Filter：https://developer.mozilla.org/en-US/docs/Web/CSS/filter
+- Canvas Filter：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/filter
+- SVG Filter：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter
+- WebGL 中一般称作后处理
 
 参考 CSS Filter 语法，我们支持对图形应用一个或多个滤镜效果，[示例](/zh/examples/shape#filter)：
 
@@ -547,10 +482,10 @@ circle.style.filter = 'blur(5px) brightness(0.4)'; // 可叠加
 
 目前可以在 g-canvas/svg/webgl 渲染器中使用滤镜，有以下注意事项：
 
--   由于 Canvas Filter 支持度不佳，主要是 [Safari 不支持](https://caniuse.com/mdn-api_canvasrenderingcontext2d_filter)，因此使用 g-canvas 无法在 Safari 中正常展示滤镜
--   g-canvas 和 g-svg 在部分 filter 效果上略有差异
--   可以施加在所有基础图形以及 Group 上
--   该属性暂不支持动画
+- 由于 Canvas Filter 支持度不佳，主要是 [Safari 不支持](https://caniuse.com/mdn-api_canvasrenderingcontext2d_filter)，因此使用 g-canvas 无法在 Safari 中正常展示滤镜
+- g-canvas 和 g-svg 在部分 filter 效果上略有差异
+- 可以施加在所有基础图形以及 Group 上
+- 该属性暂不支持动画
 
 #### blur
 
@@ -583,10 +518,10 @@ circle.style.filter = 'brightness(200%)';
 
 在图像下展示阴影，可以设置阴影颜色、偏移量与模糊效果，依次传入以下参数：
 
--   offset-x 描述阴影的水平偏移距离，单位 px
--   offset-y 描述阴影的垂直偏移距离，单位 px
--   blur-radius 数值越大越模糊，单位 px，不允许为负数
--   color 阴影颜色
+- offset-x 描述阴影的水平偏移距离，单位 px
+- offset-y 描述阴影的垂直偏移距离，单位 px
+- blur-radius 数值越大越模糊，单位 px，不允许为负数
+- color 阴影颜色
 
 阴影不会影响图形的包围盒尺寸。
 
@@ -762,19 +697,19 @@ group.style.visibility = 'visible';
 
 ```js
 const image = new Image({
-    style: {
-        x: 0,
-        y: 0,
-        width: 200,
-        height: 200,
-        clipPath: new Circle({
-            style: {
-                cx: 100,
-                cy: 100,
-                r: 50,
-            },
-        }),
-    },
+  style: {
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 200,
+    clipPath: new Circle({
+      style: {
+        cx: 100,
+        cy: 100,
+        r: 50,
+      },
+    }),
+  },
 });
 ```
 
@@ -782,27 +717,27 @@ const image = new Image({
 
 ```js
 const image = new Image({
-    style: {
-        //... 省略其他属性
-    },
+  style: {
+    //... 省略其他属性
+  },
 });
 
 image.style.clipPath = new Circle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 50,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 50,
+  },
 });
 // 或者兼容旧版写法
 image.setClip(
-    new Circle({
-        style: {
-            cx: 100,
-            cy: 100,
-            r: 50,
-        },
-    }),
+  new Circle({
+    style: {
+      cx: 100,
+      cy: 100,
+      r: 50,
+    },
+  }),
 );
 ```
 
@@ -825,11 +760,11 @@ image.setClip(null);
 ```js
 // 对裁剪区域应用动画
 clipPathCircle.animate(
-    [{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }],
-    {
-        duration: 1500,
-        iterations: Infinity,
-    },
+  [{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }],
+  {
+    duration: 1500,
+    iterations: Infinity,
+  },
 );
 ```
 
@@ -841,31 +776,31 @@ clipPathCircle.animate(
 
 ```js
 const circle = new Circle({
-    style: {
-        offsetPath: new Line({
-            // 创建运动轨迹
-            style: {
-                // 不需要设置其他与轨迹无关的绘图属性
-                x1: 100,
-                y1: 100,
-                x2: 300,
-                y2: 100,
-            },
-        }),
-        r: 10,
-    },
+  style: {
+    offsetPath: new Line({
+      // 创建运动轨迹
+      style: {
+        // 不需要设置其他与轨迹无关的绘图属性
+        x1: 100,
+        y1: 100,
+        x2: 300,
+        y2: 100,
+      },
+    }),
+    r: 10,
+  },
 });
 
 const animation = circle.animate(
-    [
-        { offsetDistance: 0 }, // 变换
-        { offsetDistance: 1 },
-    ],
-    {
-        duration: 3000,
-        easing: 'ease-in-out',
-        iterations: Infinity,
-    },
+  [
+    { offsetDistance: 0 }, // 变换
+    { offsetDistance: 1 },
+  ],
+  {
+    duration: 3000,
+    easing: 'ease-in-out',
+    iterations: Infinity,
+  },
 );
 ```
 
@@ -889,10 +824,10 @@ const animation = circle.animate(
 
 ```js
 const circle = new Circle({
-    style: {
-        //... 省略其他属性
-        cursor: 'pointer',
-    },
+  style: {
+    //... 省略其他属性
+    cursor: 'pointer',
+  },
 });
 ```
 
@@ -906,27 +841,27 @@ const circle = new Circle({
 
 简而言之，[fill](/zh/api/basic/display-object#fill) [stroke](/zh/api/basic/display-object#stroke) 和 [visibility](/zh/api/basic/display-object#visibility) 都可以独立或组合影响拾取判定行为。目前支持以下关键词：
 
--   `'auto'` 默认值，等同于 `'visiblepainted'`。
--   `'none'` 永远不会成为响应事件的目标。
--   `'visiblepainted'` 满足以下条件才会响应事件：
-    -   [visibility](/zh/api/basic/display-object#visibility) 设置为 `'visible'`，即图形为可见的。
-    -   在图形填充区域触发同时 [fill](/zh/api/basic/display-object#fill) 取非 `'none'` 的值。或者在图形描边区域触发同时 [stroke](/zh/api/basic/display-object#stroke) 取非 `'none'` 的值。
--   `'visiblefill'` 满足以下条件才会响应事件：
-    -   [visibility](/zh/api/basic/display-object#visibility) 设置为 `'visible'`，即图形为可见的。
-    -   在图形填充区域触发，不受 [fill](/zh/api/basic/display-object#fill) 取值的影响。
--   `'visiblestroke'` 满足以下条件才会响应事件：
-    -   [visibility](/zh/api/basic/display-object#visibility) 设置为 `'visible'`，即图形为可见的。
-    -   在图形描边区域触发，不受 [stroke](/zh/api/basic/display-object#stroke) 取值的影响。
--   `'visible'` 满足以下条件才会响应事件：
-    -   [visibility](/zh/api/basic/display-object#visibility) 设置为 `'visible'`，即图形为可见的。
-    -   在图形填充或者描边区域触发，不受 [fill](/zh/api/basic/display-object#fill) 和 [stroke](/zh/api/basic/display-object#stroke) 取值的影响。
--   `'painted'` 满足以下条件才会响应事件：
-    -   在图形填充区域触发同时 [fill](/zh/api/basic/display-object#fill) 取非 `'none'` 的值。或者在图形描边区域触发同时 [stroke](/zh/api/basic/display-object#stroke) 取非 `'none'` 的值。不受 [visibility](/zh/api/basic/display-object#visibility) 取值的影响。
--   `'fill'` 满足以下条件才会响应事件：
-    -   在图形填充区域触发，不受 [fill](/zh/api/basic/display-object#fill) 取值的影响。不受 [visibility](/zh/api/basic/display-object#visibility) 取值的影响。
--   `'stroke'` 满足以下条件才会响应事件：
-    -   在图形描边区域触发，不受 [stroke](/zh/api/basic/display-object#stroke) 取值的影响。不受 [visibility](/zh/api/basic/display-object#visibility) 取值的影响。
--   `'all'` 只要进入图形的填充和描边区域就会响应事件。因此不会受 [fill](/zh/api/basic/display-object#fill) [stroke](/zh/api/basic/display-object#stroke) [visibility](/zh/api/basic/display-object#visibility) 的取值影响。
+- `'auto'` 默认值，等同于 `'visiblepainted'`。
+- `'none'` 永远不会成为响应事件的目标。
+- `'visiblepainted'` 满足以下条件才会响应事件：
+  - [visibility](/zh/api/basic/display-object#visibility) 设置为 `'visible'`，即图形为可见的。
+  - 在图形填充区域触发同时 [fill](/zh/api/basic/display-object#fill) 取非 `'none'` 的值。或者在图形描边区域触发同时 [stroke](/zh/api/basic/display-object#stroke) 取非 `'none'` 的值。
+- `'visiblefill'` 满足以下条件才会响应事件：
+  - [visibility](/zh/api/basic/display-object#visibility) 设置为 `'visible'`，即图形为可见的。
+  - 在图形填充区域触发，不受 [fill](/zh/api/basic/display-object#fill) 取值的影响。
+- `'visiblestroke'` 满足以下条件才会响应事件：
+  - [visibility](/zh/api/basic/display-object#visibility) 设置为 `'visible'`，即图形为可见的。
+  - 在图形描边区域触发，不受 [stroke](/zh/api/basic/display-object#stroke) 取值的影响。
+- `'visible'` 满足以下条件才会响应事件：
+  - [visibility](/zh/api/basic/display-object#visibility) 设置为 `'visible'`，即图形为可见的。
+  - 在图形填充或者描边区域触发，不受 [fill](/zh/api/basic/display-object#fill) 和 [stroke](/zh/api/basic/display-object#stroke) 取值的影响。
+- `'painted'` 满足以下条件才会响应事件：
+  - 在图形填充区域触发同时 [fill](/zh/api/basic/display-object#fill) 取非 `'none'` 的值。或者在图形描边区域触发同时 [stroke](/zh/api/basic/display-object#stroke) 取非 `'none'` 的值。不受 [visibility](/zh/api/basic/display-object#visibility) 取值的影响。
+- `'fill'` 满足以下条件才会响应事件：
+  - 在图形填充区域触发，不受 [fill](/zh/api/basic/display-object#fill) 取值的影响。不受 [visibility](/zh/api/basic/display-object#visibility) 取值的影响。
+- `'stroke'` 满足以下条件才会响应事件：
+  - 在图形描边区域触发，不受 [stroke](/zh/api/basic/display-object#stroke) 取值的影响。不受 [visibility](/zh/api/basic/display-object#visibility) 取值的影响。
+- `'all'` 只要进入图形的填充和描边区域就会响应事件。因此不会受 [fill](/zh/api/basic/display-object#fill) [stroke](/zh/api/basic/display-object#stroke) [visibility](/zh/api/basic/display-object#visibility) 的取值影响。
 
 在该 [示例](/zh/examples/shape#circle) 中，我们将该属性设置为 `stroke`，因此填充区域不会响应事件：
 
@@ -1039,7 +974,7 @@ circle.setLocalScale(-1, 1);
 
 ### 设置缩放和旋转中心
 
-除了使用 [transformOrigin](/zh/api/basic/display-object#transformorigin) 属性，还可以手动计算相对于 [anchor](/zh/api/basic/display-object#anchor) 位置的偏移量，再通过 `setOrigin` 重新设置变换中心。
+除了使用 [transformOrigin](/zh/api/basic/display-object#transformorigin) 属性，还可以通过 `setOrigin` 重新设置变换中心。
 
 | 名称      | 参数                                                                                             | 返回值 | 备注                             |
 | --------- | ------------------------------------------------------------------------------------------------ | ------ | -------------------------------- |
@@ -1048,35 +983,33 @@ circle.setLocalScale(-1, 1);
 
 设置局部坐标系下的缩放和旋转中心，[示例](/zh/examples/scenegraph#origin)
 
-数值为相对于[锚点](/zh/api/basic/display-object#anchor)的偏移量，默认值为 `[0, 0]`，因此就是锚点位置。
+默认值为 `[0, 0]`。
 
 在下面的例子中，我们在 `[100, 100]` 处放置了一个半径为 100 的圆：
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 100,
+  },
 });
 ```
 
-如果我们想让圆以圆心作为变换中心进行缩放，由于此时锚点就是圆心，因此缩放前后锚点在世界坐标系下位置不变，发生变化的是包围盒：
+如果我们想让圆以圆心作为变换中心进行缩放，发生变化的是包围盒：
 
 ```js
-circle.setOrigin(0, 0);
+circle.setOrigin(100, 100);
 circle.scale(0.5);
-circle.getPosition(); // [100, 100]
 circle.getBounds(); // { center: [100, 100], halfExtents: [50, 50] }
 ```
 
-但假如我们想让这个圆以自身包围盒左上角进行缩放，即相对于当前锚点（圆心）偏移 `[-100, -100]`。缩放之后锚点也会发生偏移，圆在世界坐标系下的位置自然也来到了 `[50, 50]`。同理，包围盒的中心点发生了移动：
+但假如我们想让这个圆以自身包围盒左上角进行缩放：
 
 ```js
-circle.setOrigin(-100, -100);
+circle.setOrigin(0, 0);
 circle.scale(0.5);
-circle.getPosition(); // [50, 50]
 circle.getBounds(); // { center: [50, 50], halfExtents: [50, 50] }
 ```
 
@@ -1084,11 +1017,11 @@ circle.getBounds(); // { center: [50, 50], halfExtents: [50, 50] }
 
 ```js
 const rect = new Rect({
-    id: 'rect',
-    style: {
-        width: 300,
-        height: 200,
-    },
+  id: 'rect',
+  style: {
+    width: 300,
+    height: 200,
+  },
 });
 rect.setOrigin(150, 100); // 设置旋转与缩放中心为自身包围盒中心点
 ```
@@ -1097,14 +1030,14 @@ rect.setOrigin(150, 100); // 设置旋转与缩放中心为自身包围盒中心
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100,
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100,
+    cy: 100,
+    r: 100,
+  },
 });
 
-circle.setOrigin(-100, -100); // 相对于锚点（圆心）偏移 [-100, -100]
+circle.setOrigin(0, 0);
 // 或者
 circle.style.transformOrigin = 'left top'; // 包围盒左上角
 // 或者
@@ -1113,8 +1046,6 @@ circle.style.transformOrigin = '0px 0px';
 circle.style.transformOrigin = '0% 0%';
 ```
 
-两者的区别在于 origin 相对于锚点定义，而 transformOrigin 相对于包围盒定义。
-
 ## 获取包围盒
 
 基于不同的[包围盒定义](/zh/api/basic/display-object#包围盒)，我们提供了以下获取方法。
@@ -1125,13 +1056,13 @@ circle.style.transformOrigin = '0% 0%';
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100, // 局部坐标系下的坐标不会影响 Geometry Bounds
-        cy: 100, // 局部坐标系下的坐标不会影响 Geometry Bounds
-        r: 100,
-        lineWidth: 20, // 样式属性不会影响 Geometry Bounds
-        shadowBlur: 10, // 样式属性不会影响 Geometry Bounds
-    },
+  style: {
+    cx: 100, // 局部坐标系下的坐标不会影响 Geometry Bounds
+    cy: 100, // 局部坐标系下的坐标不会影响 Geometry Bounds
+    r: 100,
+    lineWidth: 20, // 样式属性不会影响 Geometry Bounds
+    shadowBlur: 10, // 样式属性不会影响 Geometry Bounds
+  },
 });
 circle.getGeometryBounds(); // { center: [0, 0], halfExtents: [100, 100] }
 ```
@@ -1149,11 +1080,11 @@ group.getGeometryBounds(); // null
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100, // 应用世界坐标系下的变换
-        cy: 100,
-        r: 100,
-    },
+  style: {
+    cx: 100, // 应用世界坐标系下的变换
+    cy: 100,
+    r: 100,
+  },
 });
 circle.getBounds(); // { center: [100, 100], halfExtents: [100, 100] }
 ```
@@ -1164,12 +1095,12 @@ circle.getBounds(); // { center: [100, 100], halfExtents: [100, 100] }
 
 ```js
 const circle = new Circle({
-    style: {
-        cx: 100, // 应用世界坐标系下的变换
-        cy: 100,
-        r: 100,
-        lineWidth: 20, // 考虑样式属性
-    },
+  style: {
+    cx: 100, // 应用世界坐标系下的变换
+    cy: 100,
+    r: 100,
+    lineWidth: 20, // 考虑样式属性
+  },
 });
 // r + lineWidth / 2
 circle.getRenderBounds(); // { center: [100, 100], halfExtents: [110, 110] }
@@ -1185,12 +1116,12 @@ getBounds 的唯一区别是在父节点的局部坐标系下计算。
 
 ```js
 interface DOMRect {
-    top: number;
-    left: number;
-    right: number;
-    bottom: number;
-    width: number;
-    height: number;
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
 }
 ```
 
@@ -1326,15 +1257,15 @@ clonedCircle.getPosition(); // [10, 20]
 
 注意事项：
 
--   支持深拷贝，即自身以及整棵子树
--   克隆的新节点不会保留原始节点的父子关系，需要使用 `appendChild` 将其加入画布才会被渲染
--   与 [DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode#notes) 保持一致，不会拷贝原图形上的事件监听器
+- 支持深拷贝，即自身以及整棵子树
+- 克隆的新节点不会保留原始节点的父子关系，需要使用 `appendChild` 将其加入画布才会被渲染
+- 与 [DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode#notes) 保持一致，不会拷贝原图形上的事件监听器
 
 在这个[示例](/zh/examples/scenegraph#clone)中，我们展示了以上特性：
 
--   可以随时更改原始节点的样式属性，得到的拷贝都会是最新的，新节点同样需要被加入到场景图中才会被渲染
--   但由于不会拷贝事件监听器，因此只有原始节点可以进行拖拽
--   非深拷贝模式下，Text（Drag me 文本） 作为 Circle 的子节点不会被拷贝
+- 可以随时更改原始节点的样式属性，得到的拷贝都会是最新的，新节点同样需要被加入到场景图中才会被渲染
+- 但由于不会拷贝事件监听器，因此只有原始节点可以进行拖拽
+- 非深拷贝模式下，Text（Drag me 文本） 作为 Circle 的子节点不会被拷贝
 
 ![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*PwEYSI_ijPEAAAAAAAAAAAAAARQnAQ)
 
@@ -1349,19 +1280,19 @@ clonedCircle.getPosition(); // [10, 20]
 
 ⚠️ 兼容 [HTMLElement Style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)，因此可以使用以下方法：
 
--   style.[getPropertyValue](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)
--   style.[setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)
--   style.[removeProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty)
+- style.[getPropertyValue](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)
+- style.[setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)
+- style.[removeProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty)
 
 以下用法等价：
 
 ```js
 const circle = new Circle({
-    style: {
-        // 或者使用 attrs
-        r: 10,
-        fill: 'red',
-    },
+  style: {
+    // 或者使用 attrs
+    r: 10,
+    fill: 'red',
+  },
 });
 
 // 获取属性值
@@ -1390,8 +1321,8 @@ rect.parsedStyle.width; // CSSUnitValue { unit: 'px', value: 100 }
 
 ```js
 animation.onframe = () => {
-    rect.style.width; // '100px'
-    rect.parsedStyle.width; // CSSUnitValue { unit: 'px', value: 100 }
+  rect.style.width; // '100px'
+  rect.parsedStyle.width; // CSSUnitValue { unit: 'px', value: 100 }
 };
 ```
 
@@ -1460,18 +1391,18 @@ circle.destroyed; // true
 import { ElementEvent, MutationEvent } from '@antv/g';
 
 child.on(ElementEvent.INSERTED, (e: MutationEvent) => {
-    e.target; // child
-    e.relatedNode; // parent
+  e.target; // child
+  e.relatedNode; // parent
 });
 child.on(ElementEvent.REMOVED, (e) => {
-    e.target; // child
-    e.relatedNode; // parent
+  e.target; // child
+  e.relatedNode; // parent
 });
 child.on(ElementEvent.ATTR_MODIFIED, (e) => {
-    e.target; // child
-    e.attrName; // 属性名
-    e.prevValue; // 旧值
-    e.newValue; // 新值
+  e.target; // child
+  e.attrName; // 属性名
+  e.prevValue; // 旧值
+  e.newValue; // 新值
 });
 
 parent.appendChild(child);
@@ -1479,12 +1410,12 @@ parent.appendChild(child);
 
 目前我们支持如下场景图相关事件：
 
--   INSERTED 作为子节点被添加时触发
--   REMOVED 作为子节点被移除时触发
--   MOUNTED 首次进入画布时触发
--   UNMOUNTED 从画布中移除时触发
--   ATTR_MODIFIED 修改属性时触发
--   DESTROY 销毁时触发
+- INSERTED 作为子节点被添加时触发
+- REMOVED 作为子节点被移除时触发
+- MOUNTED 首次进入画布时触发
+- UNMOUNTED 从画布中移除时触发
+- ATTR_MODIFIED 修改属性时触发
+- DESTROY 销毁时触发
 
 ## 动画
 
@@ -1492,19 +1423,19 @@ parent.appendChild(child);
 
 ```js
 circle.animate(
-    [
-        {
-            transform: 'scale(0)',
-        },
-        {
-            transform: 'scale(1)',
-        },
-    ],
+  [
+    {
+      transform: 'scale(0)',
+    },
     {
-        duration: 500,
-        easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-        iterations: Infinity,
+      transform: 'scale(1)',
     },
+  ],
+  {
+    duration: 500,
+    easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+    iterations: Infinity,
+  },
 );
 ```
 
diff --git a/site/examples/3d/3d-basic/demo/billboard.js b/site/examples/3d/3d-basic/demo/billboard.js
index 19b1fdf3f..5d9fba632 100644
--- a/site/examples/3d/3d-basic/demo/billboard.js
+++ b/site/examples/3d/3d-basic/demo/billboard.js
@@ -53,7 +53,8 @@ const canvas = new Canvas({
   });
   const label = new Text({
     style: {
-      x: 20,
+      x: 200,
+      y: 200,
       text: '0',
       fontSize: 12,
       fill: 'black',
@@ -69,6 +70,7 @@ const canvas = new Canvas({
     x: 300,
   });
   x.childNodes[0].style.text = 'x';
+  x.childNodes[0].style.x = 300;
   canvas.appendChild(x);
 
   const y = origin.cloneNode(true);
@@ -76,6 +78,7 @@ const canvas = new Canvas({
     y: 100,
   });
   y.childNodes[0].style.text = 'y';
+  y.childNodes[0].style.y = 100;
   canvas.appendChild(y);
 
   const z = origin.cloneNode(true);
@@ -83,6 +86,7 @@ const canvas = new Canvas({
     z: 100,
   });
   z.childNodes[0].style.text = 'z';
+  z.childNodes[0].style.z = 100;
   canvas.appendChild(z);
 
   const xAxis = new Line({
@@ -178,7 +182,7 @@ const canvas = new Canvas({
 
   const path = new Path({
     style: {
-      path: [
+      d: [
         ['M', 57.06339097770921, -18.541019662496844],
         ['L', 13.225168176580645, -18.202882373436317],
         ['L', 3.67394039744206e-15, -60],
diff --git a/site/examples/3d/3d-basic/demo/force-3d.js b/site/examples/3d/3d-basic/demo/force-3d.js
index 1045213bf..96b26e06c 100644
--- a/site/examples/3d/3d-basic/demo/force-3d.js
+++ b/site/examples/3d/3d-basic/demo/force-3d.js
@@ -1679,9 +1679,6 @@ const canvas = new Canvas({
     // create a mesh
     const sphere = new Mesh({
       style: {
-        x: node.x + 300,
-        y: node.y + 250,
-        z: node.z,
         fill,
         opacity: 1,
         geometry: sphereGeometry,
@@ -1689,6 +1686,7 @@ const canvas = new Canvas({
         cursor: 'pointer',
       },
     });
+    sphere.setPosition(node.x + 300, node.y + 250, node.z);
     canvas.appendChild(sphere);
 
     sphere.addEventListener('mouseenter', () => {
diff --git a/site/examples/3d/3d-basic/demo/music-viz.tsx b/site/examples/3d/3d-basic/demo/music-viz.tsx
index 0f984db70..a228b2803 100644
--- a/site/examples/3d/3d-basic/demo/music-viz.tsx
+++ b/site/examples/3d/3d-basic/demo/music-viz.tsx
@@ -87,7 +87,7 @@ const App = function MusicViz() {
       const planeMaterial = new MeshBasicMaterial(device, {
         wireframe: true,
         wireframeColor: 'purple',
-        cullMode: CullMode.None,
+        cullMode: CullMode.NONE,
       });
       const basicMaterial = new MeshBasicMaterial(device, {
         wireframe: true,
@@ -96,38 +96,35 @@ const App = function MusicViz() {
 
       const sphere = new Mesh({
         style: {
-          x: 300,
-          y: 200,
           fill: '#120f6c',
           opacity: 1,
           geometry: sphereGeometry,
           material: basicMaterial,
         },
       });
+      sphere.setPosition(300, 200);
       canvas.appendChild(sphere);
 
       const ground = new Mesh({
         style: {
-          x: 300,
-          y: 250,
           fill: '#120f6c',
           opacity: 1,
           geometry: groundGeometry,
           material: planeMaterial,
         },
       });
+      ground.setPosition(300, 250);
       canvas.appendChild(ground);
 
       const sky = new Mesh({
         style: {
-          x: 300,
-          y: 0,
           fill: 'white',
           opacity: 1,
           geometry: skyGeometry,
           material: planeMaterial,
         },
       });
+      sky.setPosition(300, 0);
       canvas.appendChild(sky);
 
       canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
@@ -142,7 +139,10 @@ const App = function MusicViz() {
           analyser.getByteFrequencyData(dataArray);
 
           const lowerHalfArray = dataArray.slice(0, dataArray.length / 2 - 1);
-          const upperHalfArray = dataArray.slice(dataArray.length / 2 - 1, dataArray.length - 1);
+          const upperHalfArray = dataArray.slice(
+            dataArray.length / 2 - 1,
+            dataArray.length - 1,
+          );
 
           const overallAvg = avg(dataArray);
           const lowerMax = max(lowerHalfArray);
@@ -176,7 +176,10 @@ const App = function MusicViz() {
 
           const amp = 2;
           const time = window.performance.now();
-          const distance = noise.noise2D(x + time * 0.003, z + time * 0.001) * distortionFr * amp;
+          const distance =
+            noise.noise2D(x + time * 0.003, z + time * 0.001) *
+            distortionFr *
+            amp;
           positions[i + 1] = distance;
         }
 
@@ -259,7 +262,12 @@ const App = function MusicViz() {
   return (
     <>
       <label htmlFor="file">
-        <input type="file" id="file" accept="audio/*" onChange={handleFileChanged} />
+        <input
+          type="file"
+          id="file"
+          accept="audio/*"
+          onChange={handleFileChanged}
+        />
       </label>
       <audio id="audio" controls ref={audioRef}></audio>
 
diff --git a/site/examples/3d/3d-basic/demo/size-attenuation.js b/site/examples/3d/3d-basic/demo/size-attenuation.js
index bbb3b191e..2a9bb84fd 100644
--- a/site/examples/3d/3d-basic/demo/size-attenuation.js
+++ b/site/examples/3d/3d-basic/demo/size-attenuation.js
@@ -16,8 +16,6 @@ import { Plugin as PluginControl } from '@antv/g-plugin-control';
 import * as lil from 'lil-gui';
 import Stats from 'stats.js';
 
-runtime.enableCSSParsing = false;
-
 // create a renderer
 const renderer = new Renderer();
 renderer.registerPlugin(new Plugin3D());
@@ -52,13 +50,13 @@ const canvas = new Canvas({
   });
   const label = new Text({
     style: {
-      x: 20,
+      x: 200,
+      y: 200,
       text: '0',
       fontSize: 12,
       fill: 'black',
       isBillboard: true,
       billboardRotation: Math.PI / 8,
-      isSizeAttenuation: true,
     },
   });
   origin.appendChild(label);
@@ -69,6 +67,7 @@ const canvas = new Canvas({
     x: 300,
   });
   x.childNodes[0].style.text = 'x';
+  x.childNodes[0].style.x = 300;
   canvas.appendChild(x);
 
   const y = origin.cloneNode(true);
@@ -76,6 +75,7 @@ const canvas = new Canvas({
     y: 100,
   });
   y.childNodes[0].style.text = 'y';
+  y.childNodes[0].style.y = 100;
   canvas.appendChild(y);
 
   const z = origin.cloneNode(true);
@@ -83,6 +83,7 @@ const canvas = new Canvas({
     z: 100,
   });
   z.childNodes[0].style.text = 'z';
+  z.childNodes[0].style.z = 100;
   canvas.appendChild(z);
 
   const xAxis = new Line({
diff --git a/site/examples/3d/geometry/demo/capsule.js b/site/examples/3d/geometry/demo/capsule.js
index 29e025283..7da59b9fc 100644
--- a/site/examples/3d/geometry/demo/capsule.js
+++ b/site/examples/3d/geometry/demo/capsule.js
@@ -40,15 +40,13 @@ const canvas = new Canvas({
 
   const capsule = new Mesh({
     style: {
-      x: 300,
-      y: 250,
       fill: 'white',
       opacity: 1,
       geometry: capsuleGeometry,
       material: basicMaterial,
     },
   });
-
+  capsule.setPosition(300, 250);
   canvas.appendChild(capsule);
 
   // add a directional light into scene
diff --git a/site/examples/3d/geometry/demo/cone.js b/site/examples/3d/geometry/demo/cone.js
index f3dcbb94a..212aba880 100644
--- a/site/examples/3d/geometry/demo/cone.js
+++ b/site/examples/3d/geometry/demo/cone.js
@@ -40,15 +40,13 @@ const canvas = new Canvas({
 
   const cone = new Mesh({
     style: {
-      x: 300,
-      y: 250,
       fill: 'white',
       opacity: 1,
       geometry: coneGeometry,
       material: basicMaterial,
     },
   });
-
+  cone.setPosition(300, 250);
   canvas.appendChild(cone);
 
   // add a directional light into scene
diff --git a/site/examples/3d/geometry/demo/cylinder.js b/site/examples/3d/geometry/demo/cylinder.js
index 601fc19bb..cc0ac4008 100644
--- a/site/examples/3d/geometry/demo/cylinder.js
+++ b/site/examples/3d/geometry/demo/cylinder.js
@@ -40,15 +40,13 @@ const canvas = new Canvas({
 
   const cylinder = new Mesh({
     style: {
-      x: 300,
-      y: 250,
       fill: 'white',
       opacity: 1,
       geometry: cylinderGeometry,
       material: basicMaterial,
     },
   });
-
+  cylinder.setPosition(300, 250);
   canvas.appendChild(cylinder);
 
   // add a directional light into scene
diff --git a/site/examples/3d/geometry/demo/sphere.js b/site/examples/3d/geometry/demo/sphere.js
index 887c63a22..911876171 100644
--- a/site/examples/3d/geometry/demo/sphere.js
+++ b/site/examples/3d/geometry/demo/sphere.js
@@ -72,15 +72,13 @@ const canvas = new Canvas({
   // create a mesh
   const sphere = new Mesh({
     style: {
-      x: 300,
-      y: 250,
-      z: 0,
       fill: '#1890FF',
       opacity: 1,
       geometry: sphereGeometry,
       material: basicMaterial,
     },
   });
+  sphere.setPosition(300, 250, 0);
   canvas.appendChild(sphere);
 
   // const cloudMesh = new Mesh({
diff --git a/site/examples/3d/geometry/demo/torus.js b/site/examples/3d/geometry/demo/torus.js
index d6c0aea3f..b5f51405c 100644
--- a/site/examples/3d/geometry/demo/torus.js
+++ b/site/examples/3d/geometry/demo/torus.js
@@ -40,15 +40,13 @@ const canvas = new Canvas({
 
   const torus = new Mesh({
     style: {
-      x: 300,
-      y: 250,
       fill: 'white',
       opacity: 1,
       geometry: torusGeometry,
       material: basicMaterial,
     },
   });
-
+  torus.setPosition(300, 250);
   canvas.appendChild(torus);
 
   // add a directional light into scene
diff --git a/site/examples/3d/material/demo/basic.js b/site/examples/3d/material/demo/basic.js
index 6d5940583..aa3320ea8 100644
--- a/site/examples/3d/material/demo/basic.js
+++ b/site/examples/3d/material/demo/basic.js
@@ -40,15 +40,13 @@ const canvas = new Canvas({
 
   const torus = new Mesh({
     style: {
-      x: 300,
-      y: 250,
       fill: '#b0b0b0',
       opacity: 1,
       geometry: torusGeometry,
       material: basicMaterial,
     },
   });
-
+  torus.setPosition(300, 250);
   canvas.appendChild(torus);
 
   // add a directional light into scene
diff --git a/site/examples/3d/material/demo/lambert.js b/site/examples/3d/material/demo/lambert.js
index ff857d0f1..9c0bcaf40 100644
--- a/site/examples/3d/material/demo/lambert.js
+++ b/site/examples/3d/material/demo/lambert.js
@@ -40,15 +40,13 @@ const canvas = new Canvas({
 
   const torus = new Mesh({
     style: {
-      x: 300,
-      y: 250,
       fill: 'white',
       opacity: 1,
       geometry: torusGeometry,
       material: basicMaterial,
     },
   });
-
+  torus.setPosition(300, 250);
   canvas.appendChild(torus);
 
   // add a directional light into scene
diff --git a/site/examples/3d/material/demo/phong.js b/site/examples/3d/material/demo/phong.js
index d6c0aea3f..b5f51405c 100644
--- a/site/examples/3d/material/demo/phong.js
+++ b/site/examples/3d/material/demo/phong.js
@@ -40,15 +40,13 @@ const canvas = new Canvas({
 
   const torus = new Mesh({
     style: {
-      x: 300,
-      y: 250,
       fill: 'white',
       opacity: 1,
       geometry: torusGeometry,
       material: basicMaterial,
     },
   });
-
+  torus.setPosition(300, 250);
   canvas.appendChild(torus);
 
   // add a directional light into scene
diff --git a/site/examples/animation/animation-basic/demo/easing.js b/site/examples/animation/animation-basic/demo/easing.js
index a9e3fb58e..33e338b3d 100644
--- a/site/examples/animation/animation-basic/demo/easing.js
+++ b/site/examples/animation/animation-basic/demo/easing.js
@@ -43,7 +43,7 @@ const image = new Image({
     width: 200,
     height: 200,
     transformOrigin: 'center',
-    img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
   },
 });
 
diff --git a/site/examples/animation/animation-basic/demo/lifecycle.js b/site/examples/animation/animation-basic/demo/lifecycle.js
index 05bdb1fc1..aca791b06 100644
--- a/site/examples/animation/animation-basic/demo/lifecycle.js
+++ b/site/examples/animation/animation-basic/demo/lifecycle.js
@@ -44,6 +44,7 @@ const circle = new Circle({
     fill: '#1890FF',
     stroke: '#F04864',
     lineWidth: 4,
+    transformOrigin: 'center',
   },
 });
 
diff --git a/site/examples/animation/animation-basic/demo/onframe.js b/site/examples/animation/animation-basic/demo/onframe.js
index 5263abe49..281904641 100644
--- a/site/examples/animation/animation-basic/demo/onframe.js
+++ b/site/examples/animation/animation-basic/demo/onframe.js
@@ -83,8 +83,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   );
   animation.onframe = () => {
     // use parsed value here
-    circle2.setLocalPosition(rect.parsedStyle.width, 20);
-    // circle2.setLocalPosition(Number(`${rect.style.width}`.replace('px', '')), 20);
+    circle2.style.cx = rect.parsedStyle.width;
   };
 });
 
diff --git a/site/examples/animation/animation-effects/demo/line-dash.js b/site/examples/animation/animation-effects/demo/line-dash.js
index 8496b16af..97c5ded4e 100644
--- a/site/examples/animation/animation-effects/demo/line-dash.js
+++ b/site/examples/animation/animation-effects/demo/line-dash.js
@@ -35,7 +35,7 @@ const canvas = new Canvas({
 const path = new Path({
   style: {
     stroke: 'black',
-    path:
+    d:
       'M 100,300' +
       'l 50,-25' +
       'a25,25 -30 0,1 50,-25' +
diff --git a/site/examples/animation/animation-effects/demo/offset-path.js b/site/examples/animation/animation-effects/demo/offset-path.js
index 483775ea3..1b6363569 100644
--- a/site/examples/animation/animation-effects/demo/offset-path.js
+++ b/site/examples/animation/animation-effects/demo/offset-path.js
@@ -70,7 +70,7 @@ const offsetPathPolyline = new Polyline({
 
 const offsetPathPath = new Path({
   style: {
-    path:
+    d:
       'M 100,300' +
       'l 50,-25' +
       'a25,25 -30 0,1 50,-25' +
@@ -88,8 +88,8 @@ const offsetPathPath = new Path({
 
 const circle1 = new Circle({
   style: {
-    cx: 200,
-    cy: 200,
+    cx: 0,
+    cy: 0,
     r: 60,
     fill: '#1890FF',
     stroke: '#F04864',
@@ -99,8 +99,8 @@ const circle1 = new Circle({
 });
 const circle2 = new Circle({
   style: {
-    cx: 200,
-    cy: 200,
+    cx: 0,
+    cy: 0,
     r: 10,
     fill: '#1890FF',
     stroke: '#F04864',
@@ -110,8 +110,8 @@ const circle2 = new Circle({
 });
 const circle3 = new Circle({
   style: {
-    cx: 200,
-    cy: 300,
+    cx: 0,
+    cy: 0,
     r: 60,
     fill: '#1890FF',
     stroke: '#F04864',
@@ -121,31 +121,30 @@ const circle3 = new Circle({
 });
 
 let animation;
-canvas.addEventListener(CanvasEvent.READY, () => {
-  canvas.appendChild(offsetPathPolyline);
-  canvas.appendChild(circle1);
-  canvas.appendChild(circle2);
-  canvas.appendChild(circle3);
 
-  circle1.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
-    duration: 2500,
-    easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-    iterations: Infinity,
-    direction: 'alternate',
-  });
-  animation = circle2.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
-    duration: 3500,
-    easing: 'linear',
-    iterations: Infinity,
-    direction: 'alternate',
-  });
+canvas.appendChild(offsetPathPolyline);
+canvas.appendChild(circle1);
+canvas.appendChild(circle2);
+canvas.appendChild(circle3);
 
-  circle3.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
-    duration: 4500,
-    easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-    iterations: Infinity,
-    direction: 'alternate',
-  });
+circle1.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
+  duration: 2500,
+  easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+  iterations: Infinity,
+  direction: 'alternate',
+});
+animation = circle2.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
+  duration: 3500,
+  easing: 'linear',
+  iterations: Infinity,
+  direction: 'alternate',
+});
+
+circle3.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
+  duration: 4500,
+  easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+  iterations: Infinity,
+  direction: 'alternate',
 });
 
 // stats
diff --git a/site/examples/animation/animation-effects/demo/ripple-effect.js b/site/examples/animation/animation-effects/demo/ripple-effect.js
index ba8464435..7883f0e3b 100644
--- a/site/examples/animation/animation-effects/demo/ripple-effect.js
+++ b/site/examples/animation/animation-effects/demo/ripple-effect.js
@@ -78,14 +78,14 @@ const mountain1 = new Path({
     shadowColor: 'rgba(124,94,44,0.5)',
     shadowBlur: 50,
     // @see https://g-next.antv.vision/zh/docs/api/basic/display-object#%E8%A3%81%E5%89%AA
-    clipPath: new Rect({
-      style: {
-        y: -10,
-        x: -10,
-        width: 60,
-        height: 51,
-      },
-    }),
+    // clipPath: new Rect({
+    //   style: {
+    //     y: -10,
+    //     x: -10,
+    //     width: 60,
+    //     height: 51,
+    //   },
+    // }),
   },
 });
 
diff --git a/site/examples/animation/morph/demo/convert-to-path.js b/site/examples/animation/morph/demo/convert-to-path.js
index aac9c1c6c..06beb0466 100644
--- a/site/examples/animation/morph/demo/convert-to-path.js
+++ b/site/examples/animation/morph/demo/convert-to-path.js
@@ -59,121 +59,121 @@ const showConvertedPath = (object) => {
   canvas.appendChild(objectPath);
 };
 
-canvas.addEventListener(CanvasEvent.READY, () => {
-  /**
-   * Circle -> Path
-   */
-  const circle = new Circle({
-    style: {
-      cx: 0,
-      cy: 0,
-      r: 100,
-      transform: 'translate(100, 100)',
-      fill: 'red',
-      opacity: 0.5,
-    },
-  });
-  canvas.appendChild(circle);
-  circle.scale(0.5);
-  showConvertedPath(circle);
+/**
+ * Circle -> Path
+ */
+const circle = new Circle({
+  style: {
+    cx: 0,
+    cy: 0,
+    r: 100,
+    transform: 'translate(100, 100)',
+    fill: 'red',
+    opacity: 0.5,
+  },
+});
+canvas.appendChild(circle);
+circle.scale(0.5);
+showConvertedPath(circle);
 
-  /**
-   * Ellipse -> Path
-   */
-  const ellipse = new Ellipse({
-    style: {
-      cx: 0,
-      cy: 0,
-      rx: 100,
-      ry: 60,
-      fill: 'red',
-      opacity: 0.5,
-    },
-  });
-  ellipse.setPosition(300, 100);
-  ellipse.setLocalScale(0.6);
-  canvas.appendChild(ellipse);
-  showConvertedPath(ellipse);
+/**
+ * Ellipse -> Path
+ */
+const ellipse = new Ellipse({
+  style: {
+    cx: 0,
+    cy: 0,
+    rx: 100,
+    ry: 60,
+    fill: 'red',
+    opacity: 0.5,
+  },
+});
+ellipse.setPosition(300, 100);
+ellipse.setLocalScale(0.6);
+canvas.appendChild(ellipse);
+showConvertedPath(ellipse);
 
-  /**
-   * Rect -> Path
-   */
-  const rect = new Rect({
-    style: {
-      x: 200,
-      y: 100,
-      width: 100,
-      height: 100,
-      fill: 'red',
-      opacity: 0.5,
-    },
-  });
-  canvas.appendChild(rect);
-  rect.rotateLocal(30);
-  showConvertedPath(rect);
+/**
+ * Rect -> Path
+ */
+const rect = new Rect({
+  style: {
+    x: 200,
+    y: 100,
+    width: 100,
+    height: 100,
+    fill: 'red',
+    opacity: 0.5,
+    transformOrigin: '200 100',
+  },
+});
+canvas.appendChild(rect);
+rect.rotateLocal(30);
+showConvertedPath(rect);
 
-  /**
-   * Line -> Path
-   */
-  const line = new Line({
-    style: {
-      x1: 100,
-      y1: 200,
-      x2: 100,
-      y2: 300,
-      lineWidth: 30,
-      stroke: 'red',
-      opacity: 0.5,
-    },
-  });
-  canvas.appendChild(line);
-  showConvertedPath(line);
+/**
+ * Line -> Path
+ */
+const line = new Line({
+  style: {
+    x1: 100,
+    y1: 200,
+    x2: 100,
+    y2: 300,
+    lineWidth: 30,
+    stroke: 'red',
+    opacity: 0.5,
+  },
+});
+canvas.appendChild(line);
+showConvertedPath(line);
 
-  /**
-   * Polyline -> Path
-   */
-  const polyline = new Polyline({
-    style: {
-      points: '100,360 100,400, 50,400',
-      lineWidth: 30,
-      stroke: 'red',
-      opacity: 0.5,
-      transformOrigin: 'center',
-    },
-  });
-  canvas.appendChild(polyline);
-  polyline.rotateLocal(90);
-  showConvertedPath(polyline);
+/**
+ * Polyline -> Path
+ */
+const polyline = new Polyline({
+  style: {
+    points: '100,360 100,400, 50,400',
+    lineWidth: 30,
+    stroke: 'red',
+    opacity: 0.5,
+    transformOrigin: 'center',
+  },
+});
+canvas.appendChild(polyline);
+polyline.rotateLocal(90);
+showConvertedPath(polyline);
 
-  /**
-   * Polyline -> Path
-   */
-  const polygon = new Polygon({
-    style: {
-      points: '200,360 200,400, 250,400',
-      fill: 'red',
-      transform: 'scale(2)',
-      opacity: 0.5,
-    },
-  });
-  canvas.appendChild(polygon);
-  showConvertedPath(polygon);
+/**
+ * Polyline -> Path
+ */
+const polygon = new Polygon({
+  style: {
+    points: '200,360 200,400, 250,400',
+    fill: 'red',
+    transform: 'scale(2)',
+    transformOrigin: '200 360',
+    opacity: 0.5,
+  },
+});
+canvas.appendChild(polygon);
+showConvertedPath(polygon);
 
-  /**
-   * Path -> Path
-   */
-  const path = new Path({
-    style: {
-      d: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011Z',
-      fill: 'red',
-      opacity: 0.5,
-    },
-  });
-  path.translate(300, 250);
-  path.scale(0.2);
-  canvas.appendChild(path);
-  showConvertedPath(path);
+/**
+ * Path -> Path
+ */
+const path = new Path({
+  style: {
+    d: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011Z',
+    fill: 'red',
+    opacity: 0.5,
+  },
 });
+path.translate(300, 250);
+path.scale(0.2);
+canvas.appendChild(path);
+showConvertedPath(path);
 
 // stats
 const stats = new Stats();
diff --git a/site/examples/animation/morph/demo/issue.js b/site/examples/animation/morph/demo/issue.js
index c0581abb2..1d1032c39 100644
--- a/site/examples/animation/morph/demo/issue.js
+++ b/site/examples/animation/morph/demo/issue.js
@@ -7,8 +7,6 @@ import { Renderer as WebGPURenderer } from '@antv/g-webgpu';
 import * as lil from 'lil-gui';
 import Stats from 'stats.js';
 
-runtime.enableCSSParsing = false;
-
 // create a renderer
 const canvasRenderer = new CanvasRenderer();
 const webglRenderer = new WebGLRenderer();
@@ -43,7 +41,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       fill: '#5B8FF9',
       stroke: '#5B8FF9',
       fillOpacity: 0.95,
-      path: 'M51.3636360168457,0L282.5,0L282.5,405L51.3636360168457,405Z',
+      d: 'M51.3636360168457,0L282.5,0L282.5,405L51.3636360168457,405Z',
     },
   });
   group.appendChild(path);
@@ -51,7 +49,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   path.animate(
     [
       {
-        path: 'M51.3636360168457,0L282.5,0L282.5,405L51.3636360168457,405Z',
+        d: 'M51.3636360168457,0L282.5,0L282.5,405L51.3636360168457,405Z',
         fill: '#5B8FF9',
         stroke: '#5B8FF9',
         fillOpacity: 0.95,
@@ -59,7 +57,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
         opacity: 1,
       },
       {
-        path: 'M73.37662506103516,0L271.4934997558594,0L271.4934997558594,395L73.37662506103516,395Z',
+        d: 'M73.37662506103516,0L271.4934997558594,0L271.4934997558594,395L73.37662506103516,395Z',
         fill: '#5B8FF9',
         stroke: '#5B8FF9',
         fillOpacity: 0.95,
@@ -78,14 +76,14 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       fill: '#5AD8A6',
       stroke: '#5AD8A6',
       fillOpacity: 0.95,
-      path: 'M290,0L527.272705078125,0L527.272705078125,420L290,420Z',
+      d: 'M290,0L527.272705078125,0L527.272705078125,420L290,420Z',
     },
   });
   group.appendChild(path2);
   path2.animate(
     [
       {
-        path: 'M290,0L527.272705078125,0L527.272705078125,420L290,420Z',
+        d: 'M290,0L527.272705078125,0L527.272705078125,420L290,420Z',
         fill: '#5B8FF9',
         stroke: '#5B8FF9',
         fillOpacity: 0.95,
@@ -93,7 +91,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
         opacity: 1,
       },
       {
-        path: 'M301.2987060546875,32.30769348144531L504.6753234863281,32.30769348144531L504.6753234863281,420L301.2987060546875,420Z',
+        d: 'M301.2987060546875,32.30769348144531L504.6753234863281,32.30769348144531L504.6753234863281,420L301.2987060546875,420Z',
         fill: '#5AD8A6',
         stroke: '#5AD8A6',
         fillOpacity: 0.95,
diff --git a/site/examples/animation/morph/demo/morph.js b/site/examples/animation/morph/demo/morph.js
index 7424304b7..1c61a9eb8 100644
--- a/site/examples/animation/morph/demo/morph.js
+++ b/site/examples/animation/morph/demo/morph.js
@@ -67,7 +67,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   const path2Str = convertToPath(path2);
   const pathA = new Path({
     style: {
-      path: path1Str,
+      d: path1Str,
       stroke: '#F04864',
     },
   });
@@ -94,12 +94,12 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   const linePathStr = convertToPath(line);
   const pathB = new Path({
     style: {
-      path: path1Str,
+      d: path1Str,
       stroke: '#F04864',
     },
   });
   canvas.appendChild(pathB);
-  pathB.animate([{ path: path1Str }, { path: linePathStr }], {
+  pathB.animate([{ d: path1Str }, { d: linePathStr }], {
     duration: 2500,
     easing: 'ease',
     iterations: Infinity,
@@ -120,7 +120,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   const circlePathStr = convertToPath(circle);
   const pathC = new Path({
     style: {
-      path: path1Str,
+      d: path1Str,
       stroke: '#F04864',
     },
   });
@@ -152,12 +152,12 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   );
   const pathD = new Path({
     style: {
-      path: circlePathStr,
+      d: circlePathStr,
       stroke: '#F04864',
     },
   });
   canvas.appendChild(pathD);
-  pathD.animate([{ path: circlePathStr }, { path: polylinePathStr }], {
+  pathD.animate([{ d: circlePathStr }, { d: polylinePathStr }], {
     duration: 2500,
     easing: 'ease',
     iterations: Infinity,
@@ -181,12 +181,12 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   );
   const pathE = new Path({
     style: {
-      path: path1Str,
+      d: path1Str,
       stroke: '#F04864',
     },
   });
   canvas.appendChild(pathE);
-  pathE.animate([{ path: path1Str }, { path: polygonPathStr }], {
+  pathE.animate([{ d: path1Str }, { d: polygonPathStr }], {
     duration: 2500,
     easing: 'ease',
     iterations: Infinity,
@@ -209,7 +209,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   );
   const pathF = new Path({
     style: {
-      path: rectPathStr,
+      d: rectPathStr,
       stroke: '#F04864',
       fill: '',
       opacity: 0.5,
@@ -219,8 +219,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   canvas.appendChild(pathF);
   pathF.animate(
     [
-      { path: rectPathStr, stroke: '#F04864', fill: 'blue' },
-      { path: circlePathStr, stroke: 'blue', fill: '#F04864' },
+      { d: rectPathStr, stroke: '#F04864', fill: 'blue' },
+      { d: circlePathStr, stroke: 'blue', fill: '#F04864' },
     ],
     {
       duration: 2500,
@@ -235,22 +235,22 @@ canvas.addEventListener(CanvasEvent.READY, () => {
    */
   const starPath = new Path({
     style: {
-      path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011',
+      d: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011',
     },
   });
   starPath.scale(0.2);
   starPath.translate(200, 200);
   const pathG = new Path({
     style: {
-      path: rectPathStr,
+      d: rectPathStr,
       lineWidth: 2,
     },
   });
   canvas.appendChild(pathG);
   pathG.animate(
     [
-      { path: rectPathStr, stroke: '#F04864', fill: 'blue' },
-      { path: convertToPath(starPath), stroke: 'blue', fill: '#F04864' },
+      { d: rectPathStr, stroke: '#F04864', fill: 'blue' },
+      { d: convertToPath(starPath), stroke: 'blue', fill: '#F04864' },
     ],
     {
       duration: 2500,
diff --git a/site/examples/camera/camera-animation/demo/landmark2.js b/site/examples/camera/camera-animation/demo/landmark2.js
index 85db899e3..be5305bed 100644
--- a/site/examples/camera/camera-animation/demo/landmark2.js
+++ b/site/examples/camera/camera-animation/demo/landmark2.js
@@ -61,7 +61,8 @@ const circle1 = new Circle({
   },
 });
 const circle2 = circle1.cloneNode();
-circle2.setPosition(400, 400);
+circle2.style.cx = 400;
+circle2.style.cy = 400;
 circle2.style.fill = 'green';
 
 canvas.addEventListener(CanvasEvent.READY, () => {
diff --git a/site/examples/event/dragndrop/demo/drag.js b/site/examples/event/dragndrop/demo/drag.js
index 303ff3d60..dbbca53e8 100644
--- a/site/examples/event/dragndrop/demo/drag.js
+++ b/site/examples/event/dragndrop/demo/drag.js
@@ -68,8 +68,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
     moveAt(event.canvasX, event.canvasY);
 
     function moveAt(canvasX, canvasY) {
-      ball.style.x = canvasX - shiftX + 'px';
-      ball.style.y = canvasY - shiftY + 'px';
+      ball.style.x = canvasX - shiftX;
+      ball.style.y = canvasY - shiftY;
     }
 
     async function onMouseMove(event) {
diff --git a/site/examples/event/picking/demo/shapes.js b/site/examples/event/picking/demo/shapes.js
index a6ca27fd2..adb2cf399 100644
--- a/site/examples/event/picking/demo/shapes.js
+++ b/site/examples/event/picking/demo/shapes.js
@@ -82,7 +82,7 @@ const image = new Image({
   style: {
     width: 100,
     height: 100,
-    img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
     cursor: 'pointer',
   },
 });
@@ -116,7 +116,7 @@ const polyline = new Polyline({
 });
 const path = new Path({
   style: {
-    path:
+    d:
       'M 100,300' +
       'l 50,-25' +
       'a25,25 -30 0,1 50,-25' +
@@ -201,7 +201,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   polyline.rotate(20);
   canvas.appendChild(polyline);
 
-  path.setPosition(160, 200);
+  path.translate(60, 100);
   path.rotate(20);
   path.scale(0.5);
   canvas.appendChild(path);
diff --git a/site/examples/perf/animation/demo/group-move.js b/site/examples/perf/animation/demo/group-move.js
index b69d48044..dce5b0519 100644
--- a/site/examples/perf/animation/demo/group-move.js
+++ b/site/examples/perf/animation/demo/group-move.js
@@ -27,7 +27,7 @@ const groups = Array(1000)
   .fill(1)
   .map(() => {
     const text = new Text({
-      attrs: {
+      style: {
         x: 100,
         y: 100,
         fontFamily: 'PingFang SC',
@@ -39,14 +39,14 @@ const groups = Array(1000)
       },
     });
     const circle = new Circle({
-      attrs: {
+      style: {
         r: 20,
         fill: '#000',
       },
     });
     const path = new Path({
-      attrs: {
-        path: [
+      style: {
+        d: [
           ['M', 0, 0],
           ['L', 100, 100],
         ],
diff --git a/site/examples/perf/animation/demo/path.js b/site/examples/perf/animation/demo/path.js
index fb338f174..3d611e6d8 100644
--- a/site/examples/perf/animation/demo/path.js
+++ b/site/examples/perf/animation/demo/path.js
@@ -33,10 +33,10 @@ canvas.addEventListener(CanvasEvent.READY, () => {
     const y = Math.random() * 500;
     const path = canvas.appendChild(
       new Path({
-        attrs: {
+        style: {
           fill: '#C6E5FF',
           stroke: '#5B8FF9',
-          path: `M${54.4462133232839 + x},${-6.41757177038063 + y} L${
+          d: `M${54.4462133232839 + x},${-6.41757177038063 + y} L${
             61.3765714868427 + x
           },${6.41757177038063 + y} M${61.3765714868427 + x},${
             6.41757177038063 + y
diff --git a/site/examples/perf/canvas/demo/canvas-circle-path.js b/site/examples/perf/canvas/demo/canvas-circle-path.js
index 3cb9e34d9..12d76b9bf 100644
--- a/site/examples/perf/canvas/demo/canvas-circle-path.js
+++ b/site/examples/perf/canvas/demo/canvas-circle-path.js
@@ -26,8 +26,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
     const y = Math.random() * 500;
     canvas.appendChild(
       new Path({
-        attrs: {
-          path: [
+        style: {
+          d: [
             ['M', x, y],
             ['L', x + Math.random() * 100, y + Math.random() * 50],
           ],
@@ -44,7 +44,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
     const y = Math.random() * 500;
     canvas.appendChild(
       new Circle({
-        attrs: {
+        style: {
           fill: '#C6E5FF',
           stroke: '#5B8FF9',
           r: 2,
@@ -56,7 +56,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
     );
     canvas.appendChild(
       new Text({
-        attrs: {
+        style: {
           text: 'ccc',
           x,
           y,
diff --git a/site/examples/perf/canvas/demo/vs-g4.0.js b/site/examples/perf/canvas/demo/vs-g4.0.js
index 5e166a3c3..fd68d60ab 100644
--- a/site/examples/perf/canvas/demo/vs-g4.0.js
+++ b/site/examples/perf/canvas/demo/vs-g4.0.js
@@ -41,7 +41,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   for (let i = 0; i < nodesNum; i++) {
     canvas.appendChild(
       new Circle({
-        attrs: {
+        style: {
           fill: '#C6E5FF',
           stroke: '#5B8FF9',
           r: 2,
diff --git a/site/examples/plugins/dragndrop/demo/dragndrop-group.js b/site/examples/plugins/dragndrop/demo/dragndrop-group.js
index 70af6d166..f955951ad 100644
--- a/site/examples/plugins/dragndrop/demo/dragndrop-group.js
+++ b/site/examples/plugins/dragndrop/demo/dragndrop-group.js
@@ -59,8 +59,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   const node1 = new Circle({
     style: {
       r: 50,
-      cx: -50,
-      cy: -50,
+      transform: 'translate(100, 150)',
       fill: 'blue',
       cursor: 'move',
     },
@@ -79,9 +78,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
 
   const draggableGroup2 = draggableGroup1.cloneNode(true);
   const node2 = draggableGroup2.childNodes[0];
-  node2.style.cx = 50;
-  node2.style.cy = 50;
-  node2.children[0].style.text = 'node2';
+  (node2.style.transform = 'translate(200, 250)'),
+    (node2.children[0].style.text = 'node2');
 
   const droppableGroup1 = new Group({
     style: {
diff --git a/site/examples/scenegraph/basic/demo/origin.js b/site/examples/scenegraph/basic/demo/origin.js
index 8e9b7894e..40e6741be 100644
--- a/site/examples/scenegraph/basic/demo/origin.js
+++ b/site/examples/scenegraph/basic/demo/origin.js
@@ -51,6 +51,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       cy: 100,
       r: 100,
       fill: '#1890FF',
+      transformOrigin: 'center',
     },
   });
   canvas.appendChild(circle);
@@ -64,11 +65,12 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   const circleOrigin = new Circle({
     id: 'circleOrigin',
     style: {
+      cx: 100,
+      cy: 100,
       r: 10,
       fill: '#F04864',
     },
   });
-  circleOrigin.setPosition(100, 100);
   canvas.appendChild(circleOrigin);
 
   /**
@@ -127,6 +129,7 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   const text = new Text({
     id: 'rotated-text',
     style: {
+      transform: 'translate(100, 400)',
       fontFamily: 'PingFang SC',
       text: 'Lorem ipsum',
       fontSize: 32,
@@ -137,16 +140,15 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       // textBaseline: 'middle',
     },
   });
-  text.setPosition(100, 400);
   canvas.appendChild(text);
   const textOrigin = new Circle({
     id: 'textOrigin',
     style: {
       r: 10,
       fill: '#F04864',
+      transform: 'translate(100, 400)',
     },
   });
-  textOrigin.setPosition(100, 400);
   canvas.appendChild(textOrigin);
 
   /**
@@ -165,18 +167,22 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       points,
       stroke: '#1890FF',
       lineWidth: 2,
+      transform: 'translate(300, 300)',
+      transformOrigin: 'left top',
     },
   });
   canvas.appendChild(polyline);
-  polyline.setPosition(300, 300);
+
   const polylineOrigin = new Circle({
     id: 'polyline-origin',
     style: {
+      cx: 50,
+      cy: 50,
+      transform: 'translate(300, 300)',
       r: 10,
       fill: '#F04864',
     },
   });
-  polylineOrigin.setPosition(300, 300);
   canvas.appendChild(polylineOrigin);
 
   // stats
@@ -249,14 +255,13 @@ canvas.addEventListener(CanvasEvent.READY, () => {
 
       // get calculated origin
       const [ox, oy] = circle.getOrigin();
-      const x = 100;
-      const y = 100;
 
-      circleOrigin.setPosition(x + ox, y + oy);
+      circleOrigin.style.cx = ox;
+      circleOrigin.style.cy = oy;
 
       // update dat.gui
-      circleConfig.transformOriginX = ox + x;
-      circleConfig.transformOriginY = oy + y;
+      circleConfig.transformOriginX = ox;
+      circleConfig.transformOriginY = oy;
     });
   circleFolder
     .add(circleConfig, 'transformOriginX', -200, 200)
@@ -264,9 +269,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       circle.style.transformOrigin = `${tx} ${circleConfig.transformOriginY}`;
 
       const [ox, oy] = circle.getOrigin();
-      const x = 100;
-      const y = 100;
-      circleOrigin.setPosition(x + ox, y + oy);
+      circleOrigin.style.cx = ox;
+      circleOrigin.style.cy = oy;
     })
     .listen();
   circleFolder
@@ -275,9 +279,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       circle.style.transformOrigin = `${circleConfig.transformOriginX}px ${ty}px`;
 
       const [ox, oy] = circle.getOrigin();
-      const x = 100;
-      const y = 100;
-      circleOrigin.setPosition(x + ox, y + oy);
+      circleOrigin.style.cx = ox;
+      circleOrigin.style.cy = oy;
     })
     .listen();
   circleFolder.open();
@@ -302,13 +305,13 @@ canvas.addEventListener(CanvasEvent.READY, () => {
 
       // get calculated origin
       const [ox, oy, oz] = text.getOrigin();
-      const [x, y, z] = text.getPosition(); // left top corner of Bounds
 
-      textOrigin.setPosition(x + ox, y + oy, z + oz);
+      textOrigin.style.cx = ox;
+      textOrigin.style.cy = oy;
 
       // update dat.gui
-      textConfig.transformOriginX = ox + x;
-      textConfig.transformOriginY = oy + y;
+      textConfig.transformOriginX = ox;
+      textConfig.transformOriginY = oy;
     });
   textFolder
     .add(textConfig, 'transformOriginX', -200, 200)
@@ -316,8 +319,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       text.style.transformOrigin = `${tx} ${textConfig.transformOriginY}`;
 
       const [ox, oy] = text.getOrigin();
-      const [lx, ly] = text.getPosition();
-      textOrigin.setPosition(lx + ox, ly + oy);
+      textOrigin.style.cx = ox;
+      textOrigin.style.cy = oy;
     })
     .listen();
   textFolder
@@ -326,8 +329,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       text.style.transformOrigin = `${textConfig.transformOriginX}px ${ty}px`;
 
       const [ox, oy] = text.getOrigin();
-      const [lx, ly] = text.getPosition();
-      textOrigin.setPosition(lx + ox, ly + oy);
+      textOrigin.style.cx = ox;
+      textOrigin.style.cy = oy;
     })
     .listen();
   textFolder.open();
@@ -405,8 +408,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
 
   const polylineFolder = gui.addFolder('polyline');
   const polylineConfig = {
-    transformOriginX: 0,
-    transformOriginY: 0,
+    transformOriginX: 50,
+    transformOriginY: 50,
     transformOrigin: 'left top',
   };
   polylineFolder
@@ -423,11 +426,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
 
       // get calculated origin
       const [ox, oy] = polyline.getOrigin();
-      const x = 300;
-      const y = 300;
-
-      // set origin's position
-      polylineOrigin.setPosition(x + ox, y + oy);
+      polylineOrigin.style.cx = ox;
+      polylineOrigin.style.cy = oy;
 
       // update dat.gui
       polylineConfig.transformOriginX = ox;
@@ -439,9 +439,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       polyline.style.transformOrigin = `${tx} ${polylineConfig.transformOriginY}`;
 
       const [ox, oy] = polyline.getOrigin();
-      const x = 300;
-      const y = 300;
-      polylineOrigin.setPosition(x + ox, y + oy);
+      polylineOrigin.style.cx = ox;
+      polylineOrigin.style.cy = oy;
     })
     .listen();
   polylineFolder
@@ -450,9 +449,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
       polyline.style.transformOrigin = `${polylineConfig.transformOriginX}px ${ty}px`;
 
       const [ox, oy] = polyline.getOrigin();
-      const x = 300;
-      const y = 300;
-      polylineOrigin.setPosition(x + ox, y + oy);
+      polylineOrigin.style.cx = ox;
+      polylineOrigin.style.cy = oy;
     })
     .listen();
   polylineFolder.open();
diff --git a/site/examples/shape/circle/demo/circle.js b/site/examples/shape/circle/demo/circle.js
index aa9998c2a..3fb3dd407 100644
--- a/site/examples/shape/circle/demo/circle.js
+++ b/site/examples/shape/circle/demo/circle.js
@@ -225,13 +225,11 @@ circleFolder
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 300,
-  localPositionY: 200,
+  localPositionX: 0,
+  localPositionY: 0,
   localScale: 1,
   localEulerAngles: 0,
-  transformOrigin: 'center',
-  anchorX: 0.5,
-  anchorY: 0.5,
+  transformOrigin: 'left top',
 };
 transformFolder
   .add(transformConfig, 'transformOrigin', [
@@ -266,10 +264,4 @@ transformFolder
   .onChange((localEulerAngles) => {
     circle.setLocalEulerAngles(localEulerAngles);
   });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  circle.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  circle.style.anchor = [transformConfig.anchorX, anchorY];
-});
 transformFolder.open();
diff --git a/site/examples/shape/circle/demo/filter.js b/site/examples/shape/circle/demo/filter.js
index cc7b47160..a84b7acdc 100644
--- a/site/examples/shape/circle/demo/filter.js
+++ b/site/examples/shape/circle/demo/filter.js
@@ -107,8 +107,6 @@ const circleConfig = {
   lineWidth: 4,
   fillOpacity: 1,
   strokeOpacity: 1,
-  anchorX: 0.5,
-  anchorY: 0.5,
 };
 circleFolder.add(circleConfig, 'r', 50, 200).onChange((radius) => {
   circle.style.r = radius;
@@ -130,12 +128,6 @@ circleFolder
   .onChange((opacity) => {
     circle.attr('strokeOpacity', opacity);
   });
-circleFolder.add(circleConfig, 'anchorX', 0, 1, 0.1).onChange((anchorX) => {
-  circle.attr('anchor', [anchorX, circleConfig.anchorY]);
-});
-circleFolder.add(circleConfig, 'anchorY', 0, 1, 0.1).onChange((anchorY) => {
-  circle.attr('anchor', [circleConfig.anchorX, anchorY]);
-});
 
 const blurFolder = gui.addFolder('blur');
 const blurConfig = {
diff --git a/site/examples/shape/custom-element/demo/arrow.js b/site/examples/shape/custom-element/demo/arrow.js
index fbbfd077b..0b06d75b2 100644
--- a/site/examples/shape/custom-element/demo/arrow.js
+++ b/site/examples/shape/custom-element/demo/arrow.js
@@ -103,7 +103,7 @@ const pathArrow = new Arrow({
   style: {
     body: new Path({
       style: {
-        path: 'M 100,300' + 'l 50,-25' + 'a25,25 -30 0,1 50,-80',
+        d: 'M 100,300' + 'l 50,-25' + 'a25,25 -30 0,1 50,-80',
       },
     }),
     startHead: true,
diff --git a/site/examples/shape/ellipse/demo/ellipse.js b/site/examples/shape/ellipse/demo/ellipse.js
index 2d0b98ac8..4ecd7a83e 100644
--- a/site/examples/shape/ellipse/demo/ellipse.js
+++ b/site/examples/shape/ellipse/demo/ellipse.js
@@ -212,13 +212,11 @@ ellipseFolder
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 300,
-  localPositionY: 200,
+  localPositionX: 0,
+  localPositionY: 0,
   localScale: 1,
   localEulerAngles: 0,
-  transformOrigin: 'center',
-  anchorX: 0.5,
-  anchorY: 0.5,
+  transformOrigin: 'left top',
 };
 transformFolder
   .add(transformConfig, 'transformOrigin', [
@@ -253,10 +251,4 @@ transformFolder
   .onChange((localEulerAngles) => {
     ellipse.setLocalEulerAngles(localEulerAngles);
   });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  ellipse.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  ellipse.style.anchor = [transformConfig.anchorX, anchorY];
-});
 transformFolder.open();
diff --git a/site/examples/shape/html/demo/html.js b/site/examples/shape/html/demo/html.js
index a2edd7a3f..69a42edb0 100644
--- a/site/examples/shape/html/demo/html.js
+++ b/site/examples/shape/html/demo/html.js
@@ -92,8 +92,8 @@ const rect = new Rect({
 });
 const text = new Text({
   style: {
-    x: 150,
-    y: 50,
+    x: 350,
+    y: 250,
     text: 'Hover me!',
     fontSize: 22,
     fill: '#000',
@@ -229,8 +229,6 @@ const lineConfig = {
   stroke: '#1890FF',
   lineWidth: 2,
   strokeOpacity: 1,
-  anchorX: 0,
-  anchorY: 0,
   x1: 200,
   y1: 100,
   x2: 400,
@@ -261,12 +259,6 @@ lineFolder.add(lineConfig, 'lineWidth', 1, 20).onChange((lineWidth) => {
 lineFolder.add(lineConfig, 'strokeOpacity', 0, 1, 0.1).onChange((opacity) => {
   line.style.strokeOpacity = opacity;
 });
-lineFolder.add(lineConfig, 'anchorX', 0, 1, 0.1).onChange((anchorX) => {
-  line.attr('anchor', [anchorX, lineConfig.anchorY]);
-});
-lineFolder.add(lineConfig, 'anchorY', 0, 1, 0.1).onChange((anchorY) => {
-  line.attr('anchor', [lineConfig.anchorX, anchorY]);
-});
 lineFolder.open();
 
 const cameraFolder = gui.addFolder('camera actions');
diff --git a/site/examples/shape/html/demo/override-css.js b/site/examples/shape/html/demo/override-css.js
index 02896b800..d444d7ef1 100644
--- a/site/examples/shape/html/demo/override-css.js
+++ b/site/examples/shape/html/demo/override-css.js
@@ -7,8 +7,6 @@ import { Renderer as WebGPURenderer } from '@antv/g-webgpu';
 import * as lil from 'lil-gui';
 import Stats from 'stats.js';
 
-runtime.enableCSSParsing = false;
-
 // create a renderer
 const canvasRenderer = new CanvasRenderer();
 const webglRenderer = new WebGLRenderer();
diff --git a/site/examples/shape/image/demo/image-keep-aspect-ratio.js b/site/examples/shape/image/demo/image-keep-aspect-ratio.js
index 93b896ac8..bef00f16f 100644
--- a/site/examples/shape/image/demo/image-keep-aspect-ratio.js
+++ b/site/examples/shape/image/demo/image-keep-aspect-ratio.js
@@ -42,7 +42,7 @@ const image = new Image({
     y: 100,
     width: 200,
     keepAspectRatio: true,
-    img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
     cursor: 'pointer',
     pointerEvents: 'pixels',
   },
@@ -158,16 +158,14 @@ imageFolder.open();
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 200,
-  localPositionY: 100,
+  localPositionX: 0,
+  localPositionY: 0,
   localScaleX: 1,
   localScaleY: 1,
   localEulerAngles: 0,
   skewX: 0,
   skewY: 0,
   transformOrigin: 'left top',
-  anchorX: 0,
-  anchorY: 0,
 };
 transformFolder
   .add(transformConfig, 'transformOrigin', [
@@ -225,10 +223,4 @@ transformFolder.add(transformConfig, 'skewY', -180, 180).onChange((skewY) => {
     skewY * (Math.PI / 180),
   );
 });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  image.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  image.style.anchor = [transformConfig.anchorX, anchorY];
-});
 transformFolder.open();
diff --git a/site/examples/shape/image/demo/image.js b/site/examples/shape/image/demo/image.js
index 9c8c8d2b1..81edae891 100644
--- a/site/examples/shape/image/demo/image.js
+++ b/site/examples/shape/image/demo/image.js
@@ -42,7 +42,7 @@ const image = new Image({
     y: 100,
     width: 200,
     height: 200,
-    img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
     cursor: 'pointer',
     pointerEvents: 'pixels',
   },
@@ -158,16 +158,14 @@ imageFolder.open();
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 200,
-  localPositionY: 100,
+  localPositionX: 0,
+  localPositionY: 0,
   localScaleX: 1,
   localScaleY: 1,
   localEulerAngles: 0,
   skewX: 0,
   skewY: 0,
   transformOrigin: 'left top',
-  anchorX: 0,
-  anchorY: 0,
 };
 transformFolder
   .add(transformConfig, 'transformOrigin', [
@@ -225,10 +223,4 @@ transformFolder.add(transformConfig, 'skewY', -180, 180).onChange((skewY) => {
     skewY * (Math.PI / 180),
   );
 });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  image.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  image.style.anchor = [transformConfig.anchorX, anchorY];
-});
 transformFolder.open();
diff --git a/site/examples/shape/line/demo/line.js b/site/examples/shape/line/demo/line.js
index 207a02efb..06ab57baf 100644
--- a/site/examples/shape/line/demo/line.js
+++ b/site/examples/shape/line/demo/line.js
@@ -73,9 +73,8 @@ const line3 = new Line({
 
 const arrowMarker = new Path({
   style: {
-    path: 'M 10,10 L -10,0 L 10,-10 Z',
+    d: 'M 10,10 L -10,0 L 10,-10 Z',
     stroke: '#1890FF',
-    anchor: '0.5 0.5',
     transformOrigin: 'center',
   },
 });
@@ -87,12 +86,13 @@ const circleMarker = new Circle({
 });
 const imageMarker = new Image({
   style: {
+    x: -25,
+    y: -25,
     width: 50,
     height: 50,
-    anchor: [0.5, 0.5],
     transformOrigin: 'center',
     transform: 'rotate(90deg)',
-    img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
   },
 });
 
@@ -301,13 +301,11 @@ lineFolder
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 200,
-  localPositionY: 100,
+  localPositionX: 0,
+  localPositionY: 0,
   localScale: 1,
   localEulerAngles: 0,
   transformOrigin: 'left top',
-  anchorX: 0,
-  anchorY: 0,
 };
 transformFolder
   .add(transformConfig, 'transformOrigin', [
@@ -342,12 +340,6 @@ transformFolder
   .onChange((localEulerAngles) => {
     line1.setLocalEulerAngles(localEulerAngles);
   });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  line1.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  line1.style.anchor = [transformConfig.anchorX, anchorY];
-});
 transformFolder.close();
 
 const markerFolder = gui.addFolder('marker');
diff --git a/site/examples/shape/line/demo/marker.js b/site/examples/shape/line/demo/marker.js
index 2ac37c27a..762180453 100644
--- a/site/examples/shape/line/demo/marker.js
+++ b/site/examples/shape/line/demo/marker.js
@@ -49,9 +49,8 @@ const canvas = new Canvas({
  */
 const arrowMarker = new Path({
   style: {
-    path: 'M 10,10 L -10,0 L 10,-10 Z',
+    d: 'M 10,10 L -10,0 L 10,-10 Z',
     stroke: '#1890FF',
-    anchor: '0.5 0.5',
     transformOrigin: 'center',
   },
 });
@@ -89,10 +88,11 @@ const arrow1 = new Line({
  */
 const rectMarker = new Rect({
   style: {
+    x: -10,
+    y: -10,
     width: 20,
     height: 20,
     fill: '#F6BD16',
-    anchor: '0.5 0.5',
     transformOrigin: 'center',
   },
 });
@@ -122,10 +122,11 @@ const arrow2 = new Line({
  */
 const imageMarker = new Image({
   style: {
+    x: -25,
+    y: -25,
     width: 50,
     height: 50,
     src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
-    anchor: '0.5 0.5',
     transformOrigin: 'center',
     transform: 'rotate(90deg)',
   },
@@ -169,7 +170,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   function moveAt(target, canvasX, canvasY) {
     const newPosX = canvasX - shiftX;
     const newPosY = canvasY - shiftY;
-    target.setPosition(newPosX, newPosY);
+    target.style.cx = newPosX;
+    target.style.cy = newPosY;
 
     // re-define arrow
     if (target.id === 'handle1') {
@@ -194,9 +196,9 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   }
 
   canvas.addEventListener('dragstart', function (e) {
-    const [x, y] = e.target.getPosition();
-    shiftX = e.canvasX - x;
-    shiftY = e.canvasY - y;
+    const { cx, cy } = e.target.style;
+    shiftX = e.canvasX - cx;
+    shiftY = e.canvasY - cy;
 
     moveAt(e.target, e.canvasX, e.canvasY);
   });
diff --git a/site/examples/shape/path/demo/a-command.js b/site/examples/shape/path/demo/a-command.js
index 68c5b20e2..95e3a8048 100644
--- a/site/examples/shape/path/demo/a-command.js
+++ b/site/examples/shape/path/demo/a-command.js
@@ -31,7 +31,7 @@ const path = new Path({
     lineJoin: 'round',
     stroke: '#54BECC',
     cursor: 'pointer',
-    path:
+    d:
       'M 100,300' +
       'l 50,-25' +
       'a25,25 -30 0,1 50,-25' +
@@ -49,9 +49,8 @@ const path = new Path({
 
 const arrowMarker = new Path({
   style: {
-    path: 'M 10,10 L -10,0 L 10,-10 Z',
+    d: 'M 10,10 L -10,0 L 10,-10 Z',
     stroke: '#1890FF',
-    anchor: '0.5 0.5',
     transformOrigin: 'center',
   },
 });
diff --git a/site/examples/shape/path/demo/l-command.js b/site/examples/shape/path/demo/l-command.js
index 083fb59e0..30da6edc9 100644
--- a/site/examples/shape/path/demo/l-command.js
+++ b/site/examples/shape/path/demo/l-command.js
@@ -27,7 +27,7 @@ const canvas = new Canvas({
 
 const line = new Path({
   style: {
-    path: [
+    d: [
       ['M', 100, 100],
       ['L', 200, 100],
     ],
@@ -38,7 +38,7 @@ const line = new Path({
 
 const polyline = new Path({
   style: {
-    path: [
+    d: [
       ['M', 57.06339097770921, -18.541019662496844],
       ['L', 13.225168176580645, -18.202882373436317],
       ['L', 3.67394039744206e-15, -60],
diff --git a/site/examples/shape/path/demo/marker.js b/site/examples/shape/path/demo/marker.js
index c689a5e3c..63c3cd217 100644
--- a/site/examples/shape/path/demo/marker.js
+++ b/site/examples/shape/path/demo/marker.js
@@ -26,9 +26,8 @@ const canvas = new Canvas({
 
 const arrowMarker = new Path({
   style: {
-    path: 'M 10,10 L -10,0 L 10,-10 Z',
+    d: 'M 10,10 L -10,0 L 10,-10 Z',
     stroke: '#1890FF',
-    anchor: '0.5 0.5',
     transformOrigin: 'center',
   },
 });
@@ -53,7 +52,7 @@ const path = new Path({
   style: {
     lineWidth: 1,
     stroke: '#54BECC',
-    path: 'M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10',
+    d: 'M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10',
     markerStart: arrowMarker,
     markerMid: circleMarker,
     markerEnd: arrowMarker,
diff --git a/site/examples/shape/path/demo/path.js b/site/examples/shape/path/demo/path.js
index 2f4ae1176..71e8e3ce2 100644
--- a/site/examples/shape/path/demo/path.js
+++ b/site/examples/shape/path/demo/path.js
@@ -36,7 +36,7 @@ function getCirclePath(cx, cy, rx, ry) {
 
 const circlePath = new Path({
   style: {
-    path: getCirclePath(200, 0, 100, 100),
+    d: getCirclePath(200, 0, 100, 100),
     lineWidth: 10,
     stroke: '#54BECC',
     fill: '#F04864',
@@ -102,8 +102,6 @@ const circleConfig = {
   lineWidth: 1,
   lineDash: 0,
   lineDashOffset: 0,
-  anchorX: 0,
-  anchorY: 0,
   shadowColor: '#fff',
   shadowBlur: 0,
   shadowOffsetX: 0,
@@ -112,8 +110,7 @@ const circleConfig = {
   visibility: 'visible',
 };
 circleFolder.add(circleConfig, 'r', 0, 200).onChange((r) => {
-  circlePath.style.path = getCirclePath(0, 0, r, r);
-  circlePath.setPosition(100, 300);
+  circlePath.style.d = getCirclePath(200, 0, r, r);
 });
 circleFolder.add(circleConfig, 'lineWidth', 1, 20).onChange((lineWidth) => {
   circlePath.style.lineWidth = lineWidth;
@@ -126,12 +123,6 @@ circleFolder
   .onChange((lineDashOffset) => {
     circlePath.style.lineDashOffset = lineDashOffset;
   });
-circleFolder.add(circleConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  circlePath.style.anchor = [anchorX, circleConfig.anchorY];
-});
-circleFolder.add(circleConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  circlePath.style.anchor = [circleConfig.anchorX, anchorY];
-});
 circleFolder.addColor(circleConfig, 'shadowColor').onChange((color) => {
   circlePath.attr('shadowColor', color);
 });
diff --git a/site/examples/shape/path/demo/picking.js b/site/examples/shape/path/demo/picking.js
index e1dcbf531..0b5888255 100644
--- a/site/examples/shape/path/demo/picking.js
+++ b/site/examples/shape/path/demo/picking.js
@@ -27,7 +27,7 @@ const canvas = new Canvas({
 const path2 = new Path({
   style: {
     transform: 'translate(200, 100) scale(10)',
-    path: 'M2 4C0.8954304997175604 3.9999999991219815 -1.3527075029566811e-16 4.895430499717561 0 6C0 6 0 9.9375 0 12C1.3527075029566811e-16 13.10456950028244 0.8954304997175604 14.00000000087802 2 14C8 14 10.25 14 14 14C15.104569499040734 13.99999999912198 16 13.104569499040734 16 12C16 9 16 7.875 16 6C16 4.895430500959266 15.104569499040734 4.0000000008780185 14 4C13.414 4 13.194249999999998 4 12.828 4C12.297610373455704 3.9998867247945213 11.788985462367364 3.7890987493850155 11.414 3.414C11 3 10.84475 2.8447500000000003 10.586 2.5860000000000003C10.211014537632636 2.210901250614985 9.702389626544296 2.0001132752054787 9.172 2.0000000000000004C8 2.0000000000000004 7.560500000000001 2.0000000000000004 6.828000000000001 2.0000000000000004C6.297610373455706 2.0001132752054787 5.788985462367367 2.210901250614985 5.4140000000000015 2.5860000000000003C5.000000000000002 3 4.844750000000001 3.1552499999999997 4.586000000000001 3.414C4.211014537632636 3.7890987493850155 3.7023896265442966 3.9998867247945213 3.1720000000000015 4C2.5860000000000016 4 2.3662500000000017 4 2.0000000000000018 4C2.000000000000001 4 2.000000000000001 4 2 4M10.5 8.5C10.5 6.575499102701247 8.416666666666666 5.372686041889527 6.75 6.334936490538903C5.976497308103742 6.781518477924107 5.5 7.606836025229591 5.5 8.5C5.5 10.424500897298753 7.583333333333334 11.627313958110474 9.25 10.665063509461097C10.023502691896258 10.218481522075892 10.5 9.39316397477041 10.5 8.5C10.5 8.5 10.5 8.5 10.5 8.5M2.5 6C2.1150998205402494 6.000000000305956 1.874537208444147 5.583333333830511 2.0669872979090567 5.2500000003442C2.1563036954051213 5.095299461648009 2.321367204761929 4.999999999858005 2.5 5C2.8849001794597506 5.000000000305956 3.125462791688336 5.416666667163845 2.933012701693495 5.7500000003442C2.8436963042354777 5.904700538406512 2.6786327946700927 5.999999999858005 2.5 6C2.5 6 2.5 6 2.5 6M11.5 8.5C11.5 11.194301256218253 8.583333333333334 12.878239541354663 6.250000000000001 11.531088913245537C5.167096231345241 10.90587413090625 4.5 9.750429564678573 4.5 8.5C4.5 5.805698743781747 7.416666666666667 4.121760458645338 9.75 5.468911086754464C10.832903768654761 6.094125869093751 11.5 7.249570435321427 11.5 8.5C11.5 8.5 11.5 8.5 11.5 8.5',
+    d: 'M2 4C0.8954304997175604 3.9999999991219815 -1.3527075029566811e-16 4.895430499717561 0 6C0 6 0 9.9375 0 12C1.3527075029566811e-16 13.10456950028244 0.8954304997175604 14.00000000087802 2 14C8 14 10.25 14 14 14C15.104569499040734 13.99999999912198 16 13.104569499040734 16 12C16 9 16 7.875 16 6C16 4.895430500959266 15.104569499040734 4.0000000008780185 14 4C13.414 4 13.194249999999998 4 12.828 4C12.297610373455704 3.9998867247945213 11.788985462367364 3.7890987493850155 11.414 3.414C11 3 10.84475 2.8447500000000003 10.586 2.5860000000000003C10.211014537632636 2.210901250614985 9.702389626544296 2.0001132752054787 9.172 2.0000000000000004C8 2.0000000000000004 7.560500000000001 2.0000000000000004 6.828000000000001 2.0000000000000004C6.297610373455706 2.0001132752054787 5.788985462367367 2.210901250614985 5.4140000000000015 2.5860000000000003C5.000000000000002 3 4.844750000000001 3.1552499999999997 4.586000000000001 3.414C4.211014537632636 3.7890987493850155 3.7023896265442966 3.9998867247945213 3.1720000000000015 4C2.5860000000000016 4 2.3662500000000017 4 2.0000000000000018 4C2.000000000000001 4 2.000000000000001 4 2 4M10.5 8.5C10.5 6.575499102701247 8.416666666666666 5.372686041889527 6.75 6.334936490538903C5.976497308103742 6.781518477924107 5.5 7.606836025229591 5.5 8.5C5.5 10.424500897298753 7.583333333333334 11.627313958110474 9.25 10.665063509461097C10.023502691896258 10.218481522075892 10.5 9.39316397477041 10.5 8.5C10.5 8.5 10.5 8.5 10.5 8.5M2.5 6C2.1150998205402494 6.000000000305956 1.874537208444147 5.583333333830511 2.0669872979090567 5.2500000003442C2.1563036954051213 5.095299461648009 2.321367204761929 4.999999999858005 2.5 5C2.8849001794597506 5.000000000305956 3.125462791688336 5.416666667163845 2.933012701693495 5.7500000003442C2.8436963042354777 5.904700538406512 2.6786327946700927 5.999999999858005 2.5 6C2.5 6 2.5 6 2.5 6M11.5 8.5C11.5 11.194301256218253 8.583333333333334 12.878239541354663 6.250000000000001 11.531088913245537C5.167096231345241 10.90587413090625 4.5 9.750429564678573 4.5 8.5C4.5 5.805698743781747 7.416666666666667 4.121760458645338 9.75 5.468911086754464C10.832903768654761 6.094125869093751 11.5 7.249570435321427 11.5 8.5C11.5 8.5 11.5 8.5 11.5 8.5',
     lineWidth: 1,
     lineJoin: 'round',
     stroke: '#54BECC',
diff --git a/site/examples/shape/polygon/demo/marker.js b/site/examples/shape/polygon/demo/marker.js
index 6e7da3bf7..91558be40 100644
--- a/site/examples/shape/polygon/demo/marker.js
+++ b/site/examples/shape/polygon/demo/marker.js
@@ -61,9 +61,8 @@ canvas.addEventListener(CanvasEvent.READY, () => {
 
 const arrowMarker = new Path({
   style: {
-    path: 'M 10,10 L -10,0 L 10,-10 Z',
+    d: 'M 10,10 L -10,0 L 10,-10 Z',
     stroke: '#1890FF',
-    anchor: '0.5 0.5',
     transformOrigin: 'center',
   },
 });
@@ -75,12 +74,13 @@ const circleMarker = new Circle({
 });
 const imageMarker = new Image({
   style: {
+    x: -25,
+    y: -25,
     width: 50,
     height: 50,
-    anchor: [0.5, 0.5],
     transformOrigin: 'center',
     transform: 'rotate(90deg)',
-    img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
   },
 });
 
diff --git a/site/examples/shape/polygon/demo/polygon.js b/site/examples/shape/polygon/demo/polygon.js
index 2e581b81d..c018fb3cc 100644
--- a/site/examples/shape/polygon/demo/polygon.js
+++ b/site/examples/shape/polygon/demo/polygon.js
@@ -113,8 +113,6 @@ const polygonConfig = {
   lineWidth: 2,
   fillOpacity: 1,
   strokeOpacity: 1,
-  anchorX: 0,
-  anchorY: 0,
   lineDash: 0,
   lineDashOffset: 0,
   increasedLineWidthForHitTesting: 0,
@@ -213,13 +211,11 @@ polygonFolder
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 100,
-  localPositionY: 100,
+  localPositionX: 0,
+  localPositionY: 0,
   localScale: 1,
   localEulerAngles: 0,
   transformOrigin: 'left top',
-  anchorX: 0,
-  anchorY: 0,
 };
 transformFolder
   .add(transformConfig, 'transformOrigin', [
@@ -254,10 +250,4 @@ transformFolder
   .onChange((localEulerAngles) => {
     polygon.setLocalEulerAngles(localEulerAngles);
   });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  polygon.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  polygon.style.anchor = [transformConfig.anchorX, anchorY];
-});
 transformFolder.close();
diff --git a/site/examples/shape/polyline/demo/marker.js b/site/examples/shape/polyline/demo/marker.js
index 3fe288a8b..90f8c5ac8 100644
--- a/site/examples/shape/polyline/demo/marker.js
+++ b/site/examples/shape/polyline/demo/marker.js
@@ -66,9 +66,8 @@ const polyline = new Polyline({
 
 const arrowMarker = new Path({
   style: {
-    path: 'M 10,10 L -10,0 L 10,-10 Z',
+    d: 'M 10,10 L -10,0 L 10,-10 Z',
     stroke: '#1890FF',
-    anchor: '0.5 0.5',
     transformOrigin: 'center',
   },
 });
@@ -80,12 +79,13 @@ const circleMarker = new Circle({
 });
 const imageMarker = new Image({
   style: {
+    x: -25,
+    y: -25,
     width: 50,
     height: 50,
-    anchor: [0.5, 0.5],
     transformOrigin: 'center',
     transform: 'rotate(90deg)',
-    img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
   },
 });
 
diff --git a/site/examples/shape/polyline/demo/polyline.js b/site/examples/shape/polyline/demo/polyline.js
index 37c87f1df..9a5a0b880 100644
--- a/site/examples/shape/polyline/demo/polyline.js
+++ b/site/examples/shape/polyline/demo/polyline.js
@@ -218,13 +218,11 @@ lineFolder
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 50,
-  localPositionY: 50,
+  localPositionX: 0,
+  localPositionY: 0,
   localScale: 1,
   localEulerAngles: 0,
   transformOrigin: 'left top',
-  anchorX: 0,
-  anchorY: 0,
 };
 transformFolder
   .add(transformConfig, 'transformOrigin', [
@@ -259,10 +257,4 @@ transformFolder
   .onChange((localEulerAngles) => {
     polyline.setLocalEulerAngles(localEulerAngles);
   });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  polyline.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  polyline.style.anchor = [transformConfig.anchorX, anchorY];
-});
 transformFolder.close();
diff --git a/site/examples/shape/rect/demo/rect.js b/site/examples/shape/rect/demo/rect.js
index df592f28e..6798faa90 100644
--- a/site/examples/shape/rect/demo/rect.js
+++ b/site/examples/shape/rect/demo/rect.js
@@ -253,13 +253,11 @@ rectFolder.open();
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 200,
-  localPositionY: 100,
+  localPositionX: 0,
+  localPositionY: 0,
   localScale: 1,
   localEulerAngles: 0,
   transformOrigin: 'left top',
-  anchorX: 0,
-  anchorY: 0,
 };
 transformFolder
   .add(transformConfig, 'transformOrigin', [
@@ -294,10 +292,4 @@ transformFolder
   .onChange((localEulerAngles) => {
     rect.setLocalEulerAngles(localEulerAngles);
   });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  rect.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  rect.style.anchor = [transformConfig.anchorX, anchorY];
-});
 transformFolder.open();
diff --git a/site/examples/shape/text/demo/d3-word-cloud.js b/site/examples/shape/text/demo/d3-word-cloud.js
index 9dc96654d..db4c93927 100644
--- a/site/examples/shape/text/demo/d3-word-cloud.js
+++ b/site/examples/shape/text/demo/d3-word-cloud.js
@@ -44,7 +44,7 @@ const canvas = new Canvas({
   container: 'container',
   width: 600,
   height: 500,
-  renderer: webglRenderer,
+  renderer: canvasRenderer,
 });
 
 canvas.addEventListener(CanvasEvent.READY, () => {
@@ -61,8 +61,9 @@ canvas.addEventListener(CanvasEvent.READY, () => {
   function draw(words) {
     const wrapper = new Group({
       style: {
-        x: layout.size()[0] / 2,
-        y: layout.size()[1] / 2,
+        transform: `translate(${layout.size()[0] / 2}, ${
+          layout.size()[1] / 2
+        })`,
       },
     });
     canvas.appendChild(wrapper);
diff --git a/site/examples/shape/text/demo/text-single-canvas.js b/site/examples/shape/text/demo/text-single-canvas.js
index 790104708..91d41cba1 100644
--- a/site/examples/shape/text/demo/text-single-canvas.js
+++ b/site/examples/shape/text/demo/text-single-canvas.js
@@ -8,11 +8,8 @@ import {
   runtime,
 } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
-import * as lil from 'lil-gui';
 import Stats from 'stats.js';
 
-runtime.enableCSSParsing = false;
-
 // create a renderer
 const canvasRenderer = new CanvasRenderer();
 
diff --git a/site/examples/shape/text/demo/text.js b/site/examples/shape/text/demo/text.js
index 5904dde05..864d106ab 100644
--- a/site/examples/shape/text/demo/text.js
+++ b/site/examples/shape/text/demo/text.js
@@ -313,13 +313,11 @@ layoutFolder
 
 const transformFolder = gui.addFolder('transform');
 const transformConfig = {
-  localPositionX: 100,
-  localPositionY: 300,
+  localPositionX: 0,
+  localPositionY: 0,
   localScale: 1,
   localEulerAngles: 0,
   transformOrigin: 'left top',
-  anchorX: 0,
-  anchorY: 0,
   dx: 0,
   dy: 0,
 };
@@ -356,15 +354,6 @@ transformFolder
   .onChange((localEulerAngles) => {
     text.setLocalEulerAngles(localEulerAngles);
   });
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  text.style.anchor = [anchorX, transformConfig.anchorY];
-});
-transformFolder.add(transformConfig, 'anchorY', 0, 1).onChange((anchorY) => {
-  text.style.anchor = [transformConfig.anchorX, anchorY];
-});
-transformFolder.add(transformConfig, 'anchorX', 0, 1).onChange((anchorX) => {
-  text.style.anchor = [anchorX, transformConfig.anchorY];
-});
 transformFolder.add(transformConfig, 'dx', -100, 100).onChange((dx) => {
   text.style.dx = dx;
 });
diff --git a/site/examples/style/clip-path/demo/clip.js b/site/examples/style/clip-path/demo/clip.js
index 9c6d8465e..69d0529e4 100644
--- a/site/examples/style/clip-path/demo/clip.js
+++ b/site/examples/style/clip-path/demo/clip.js
@@ -31,6 +31,7 @@ const clipPathCircle = new Circle({
     cy: 150,
     r: 35,
     fill: 'blue',
+    transformOrigin: 'center',
   },
 });
 
@@ -69,8 +70,7 @@ const clipPath = new Path({
   style: {
     stroke: 'black',
     lineWidth: 2,
-    path: 'M 10,10 L -10,0 L 10,-10 Z',
-    anchor: [0.5, 0.5],
+    d: 'M 10,10 L -10,0 L 10,-10 Z',
   },
 });
 
@@ -87,8 +87,7 @@ const g = new Group();
 canvas.addEventListener(CanvasEvent.READY, () => {
   const group = new Group({
     style: {
-      x: 100,
-      y: 100,
+      transform: `translate(100, 100)`,
     },
   });
   g.appendChild(clipPathCircle);
diff --git a/site/examples/style/gradient/demo/inner-shadow.js b/site/examples/style/gradient/demo/inner-shadow.js
index 26e3dc56c..5a15dcf64 100644
--- a/site/examples/style/gradient/demo/inner-shadow.js
+++ b/site/examples/style/gradient/demo/inner-shadow.js
@@ -29,7 +29,7 @@ const canvas = new Canvas({
 const path = new Path({
   style: {
     d: 'M33.6,51S44.36,31.65,48.15,18,64.38,7.42,66.62,18s10.6,33.6,13.15,33.1',
-    transform: 'scale(3) translate(200, 100)',
+    transform: 'scale(3)',
     lineWidth: 1,
     stroke: '#54BECC',
     fill: 'linear-gradient(-90deg, rgba(178, 230, 181, 0), rgba(178, 230, 181, 0.6) 14%, rgba(166, 221, 179, 0.82) 23%, rgba(101, 171, 170, 0.9) 67%, rgb(23, 80, 157))',
diff --git a/site/examples/style/gradient/demo/path.js b/site/examples/style/gradient/demo/path.js
index c964b8d61..aa5cceb3d 100644
--- a/site/examples/style/gradient/demo/path.js
+++ b/site/examples/style/gradient/demo/path.js
@@ -23,7 +23,7 @@ const canvas = new Canvas({
   container: 'container',
   width: 600,
   height: 500,
-  renderer: webglRenderer,
+  renderer: canvasRenderer,
 });
 
 const path = new Path({
diff --git a/site/package.json b/site/package.json
index 91bddf1fb..6077f8495 100644
--- a/site/package.json
+++ b/site/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-site",
-  "version": "5.18.21",
+  "version": "6.0.7",
   "description": "G sites deployed on gh-pages",
   "keywords": [
     "g",
@@ -88,7 +88,7 @@
     "webfontloader": "1.6.28"
   },
   "devDependencies": {
-    "@antv/dumi-theme-antv": "^0.4.1",
+    "@antv/dumi-theme-antv": "^0.5.1",
     "dumi": "^2.2.1",
     "workerize-loader": "^2.0.2"
   }