diff --git a/packages/g-camera-api/CHANGELOG.md b/packages/g-camera-api/CHANGELOG.md
index 27c33eb5a..5045ed91e 100644
--- a/packages/g-camera-api/CHANGELOG.md
+++ b/packages/g-camera-api/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-camera-api
 
+## 1.2.19
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.2.18
 
 ### Patch Changes
diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json
index 6982c0713..d791a8297 100644
--- a/packages/g-camera-api/package.json
+++ b/packages/g-camera-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-camera-api",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "description": "A simple implementation of Camera API.",
   "keywords": [
     "antv",
diff --git a/packages/g-canvas/CHANGELOG.md b/packages/g-canvas/CHANGELOG.md
index 42306f916..6055105bc 100644
--- a/packages/g-canvas/CHANGELOG.md
+++ b/packages/g-canvas/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @antv/g-canvas
 
+## 1.11.23
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-canvas-renderer@1.9.20
+    -   @antv/g-plugin-canvas-path-generator@1.3.18
+    -   @antv/g-plugin-canvas-picker@1.10.20
+    -   @antv/g-plugin-dom-interaction@1.9.18
+    -   @antv/g-plugin-html-renderer@1.9.21
+
 ## 1.11.22
 
 ### Patch Changes
diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
index 8f407751f..c1eaf2b5b 100644
--- a/packages/g-canvas/package.json
+++ b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "1.11.22",
+  "version": "1.11.23",
   "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 3c2504a6e..006843391 100644
--- a/packages/g-canvaskit/CHANGELOG.md
+++ b/packages/g-canvaskit/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @antv/g-canvaskit
 
+## 0.10.23
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-canvaskit-renderer@1.3.19
+    -   @antv/g-plugin-canvas-path-generator@1.3.18
+    -   @antv/g-plugin-canvas-picker@1.10.20
+    -   @antv/g-plugin-dom-interaction@1.9.18
+    -   @antv/g-plugin-html-renderer@1.9.21
+
 ## 0.10.22
 
 ### Patch Changes
diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json
index 69cdbdd78..a0e0b16e0 100644
--- a/packages/g-canvaskit/package.json
+++ b/packages/g-canvaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "0.10.22",
+  "version": "0.10.23",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",
diff --git a/packages/g-components/CHANGELOG.md b/packages/g-components/CHANGELOG.md
index a0ed977e7..886ef750b 100644
--- a/packages/g-components/CHANGELOG.md
+++ b/packages/g-components/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-components
 
+## 1.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.17
 
 ### Patch Changes
diff --git a/packages/g-components/package.json b/packages/g-components/package.json
index 541f09f8b..77532bf7e 100644
--- a/packages/g-components/package.json
+++ b/packages/g-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-components",
-  "version": "1.9.17",
+  "version": "1.9.18",
   "description": "Components for g",
   "keywords": [
     "antv",
diff --git a/packages/g-dom-mutation-observer-api/CHANGELOG.md b/packages/g-dom-mutation-observer-api/CHANGELOG.md
index cd7cfcfc8..82342dc71 100644
--- a/packages/g-dom-mutation-observer-api/CHANGELOG.md
+++ b/packages/g-dom-mutation-observer-api/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-dom-mutation-observer-api
 
+## 1.2.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.2.17
 
 ### Patch Changes
diff --git a/packages/g-dom-mutation-observer-api/package.json b/packages/g-dom-mutation-observer-api/package.json
index 04eb4636a..cd5e50dc0 100644
--- a/packages/g-dom-mutation-observer-api/package.json
+++ b/packages/g-dom-mutation-observer-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-dom-mutation-observer-api",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "description": "A simple implementation of DOM MutationObserver API.",
   "keywords": [
     "antv",
diff --git a/packages/g-gesture/CHANGELOG.md b/packages/g-gesture/CHANGELOG.md
index d696839ca..0a251c7b8 100644
--- a/packages/g-gesture/CHANGELOG.md
+++ b/packages/g-gesture/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-gesture
 
+## 2.2.21
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 2.2.20
 
 ### Patch Changes
diff --git a/packages/g-gesture/package.json b/packages/g-gesture/package.json
index 4f9fa11bd..bbc1a65ec 100644
--- a/packages/g-gesture/package.json
+++ b/packages/g-gesture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-gesture",
-  "version": "2.2.20",
+  "version": "2.2.21",
   "description": "G Gesture",
   "keywords": [
     "antv",
diff --git a/packages/g-image-exporter/CHANGELOG.md b/packages/g-image-exporter/CHANGELOG.md
index 1e0ea1f6d..d79a8f6a7 100644
--- a/packages/g-image-exporter/CHANGELOG.md
+++ b/packages/g-image-exporter/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-image-exporter
 
+## 0.7.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 0.7.17
 
 ### Patch Changes
diff --git a/packages/g-image-exporter/package.json b/packages/g-image-exporter/package.json
index 8c88a008b..299866ef9 100644
--- a/packages/g-image-exporter/package.json
+++ b/packages/g-image-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-image-exporter",
-  "version": "0.7.17",
+  "version": "0.7.18",
   "description": "A image exporter for G using DOM API",
   "keywords": [
     "antv",
diff --git a/packages/g-lite/CHANGELOG.md b/packages/g-lite/CHANGELOG.md
index 776bca412..4a20a14da 100644
--- a/packages/g-lite/CHANGELOG.md
+++ b/packages/g-lite/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-lite
 
+## 1.2.18
+
+### Patch Changes
+
+-   4fdee19f: Keep aspect ration in image.
+-   4fdee19f: Fix picking error when isBillboard enabled.
+
 ## 1.2.17
 
 ### Patch Changes
diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json
index 3acfef12b..30963bc54 100644
--- a/packages/g-lite/package.json
+++ b/packages/g-lite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",
diff --git a/packages/g-lite/src/display-objects/Circle.ts b/packages/g-lite/src/display-objects/Circle.ts
index 35825b424..49aadbd9e 100644
--- a/packages/g-lite/src/display-objects/Circle.ts
+++ b/packages/g-lite/src/display-objects/Circle.ts
@@ -6,11 +6,30 @@ import { Shape } from '../types';
 import { DisplayObject } from './DisplayObject';
 
 export interface CircleStyleProps extends BaseStyleProps {
+  /**
+   * X coordinate of the center of the circle.
+   */
   cx?: number | string | null;
+  /**
+   * Y coordinate of the center of the circle.
+   */
   cy?: number | string | null;
+  /**
+   * Z coordinate of the center of the circle.
+   */
   cz?: number | string | null;
+  /**
+   * Radius of the circle.
+   */
   r: number | string | null;
+  /**
+   * Whether the circle is billboard.
+   */
   isBillboard?: boolean;
+  /**
+   * Whether the circle is size attenuation.
+   */
+  isSizeAttenuation?: boolean;
 }
 export interface ParsedCircleStyleProps extends ParsedBaseStyleProps {
   cx: number;
@@ -18,6 +37,7 @@ export interface ParsedCircleStyleProps extends ParsedBaseStyleProps {
   cz?: number;
   r: number;
   isBillboard?: boolean;
+  isSizeAttenuation?: boolean;
 }
 export class Circle extends DisplayObject<
   CircleStyleProps,
diff --git a/packages/g-lite/src/display-objects/Image.ts b/packages/g-lite/src/display-objects/Image.ts
index 3fff9cb55..8d37c548c 100644
--- a/packages/g-lite/src/display-objects/Image.ts
+++ b/packages/g-lite/src/display-objects/Image.ts
@@ -12,9 +12,22 @@ export interface ImageStyleProps extends BaseStyleProps {
   src?: string | HTMLImageElement;
   width?: number | string;
   height?: number | string;
+  /**
+   * Whether the circle is billboard.
+   */
   isBillboard?: boolean;
-  billboardRotation?: number;
+  /**
+   * When isBillboard enabled, whether the circle is size attenuation.
+   */
   isSizeAttenuation?: boolean;
+  /**
+   * When isBillboard enabled, the rotation.
+   */
+  billboardRotation?: number;
+  /**
+   * Whether to keep the aspect ratio of the image, under such circumstances, either the width or height can be omitted.
+   */
+  keepAspectRatio?: boolean;
 }
 export interface ParsedImageStyleProps extends ParsedBaseStyleProps {
   x: number;
@@ -27,6 +40,7 @@ export interface ParsedImageStyleProps extends ParsedBaseStyleProps {
   isBillboard?: boolean;
   billboardRotation?: number;
   isSizeAttenuation?: boolean;
+  keepAspectRatio?: boolean;
 }
 export class Image extends DisplayObject<
   ImageStyleProps,
diff --git a/packages/g-lite/src/display-objects/Line.ts b/packages/g-lite/src/display-objects/Line.ts
index 9617db9ae..a60213b2c 100644
--- a/packages/g-lite/src/display-objects/Line.ts
+++ b/packages/g-lite/src/display-objects/Line.ts
@@ -7,13 +7,38 @@ import { Shape } from '../types';
 import { DisplayObject, isDisplayObject } from './DisplayObject';
 
 export interface LineStyleProps extends BaseStyleProps {
+  /**
+   * X coordinate of the start of the line.
+   */
   x1: number;
+  /**
+   * Y coordinate of the start of the line.
+   */
   y1: number;
+  /**
+   * X coordinate of the end of the line.
+   */
   x2: number;
+  /**
+   * Y coordinate of the end of the line.
+   */
   y2: number;
+  /**
+   * Z coordinate of the start of the line.
+   */
   z1?: number;
+  /**
+   * Z coordinate of the end of the line.
+   */
   z2?: number;
+  /**
+   * Whether the line is billboard.
+   */
   isBillboard?: boolean;
+  /**
+   * Whether the line is size attenuation.
+   */
+  isSizeAttenuation?: boolean;
   /**
    * marker will be positioned at x1/y1
    */
@@ -44,6 +69,7 @@ export interface ParsedLineStyleProps extends ParsedBaseStyleProps {
   defX: number;
   defY: number;
   isBillboard?: boolean;
+  isSizeAttenuation?: boolean;
   markerStart?: DisplayObject | null;
   markerEnd?: DisplayObject | null;
   markerStartOffset?: number;
@@ -70,7 +96,6 @@ export class Line extends DisplayObject<LineStyleProps, ParsedLineStyleProps> {
         y2: 0,
         z1: 0,
         z2: 0,
-        isBillboard: false,
         ...style,
       },
       ...rest,
diff --git a/packages/g-lite/src/display-objects/Path.ts b/packages/g-lite/src/display-objects/Path.ts
index a2926dcf0..d05603bd3 100644
--- a/packages/g-lite/src/display-objects/Path.ts
+++ b/packages/g-lite/src/display-objects/Path.ts
@@ -41,7 +41,14 @@ export interface PathStyleProps extends BaseStyleProps {
    */
   markerEndOffset?: number;
 
+  /**
+   * Whether the circle is billboard.
+   */
   isBillboard?: boolean;
+  /**
+   * Whether the circle is size attenuation.
+   */
+  isSizeAttenuation?: boolean;
 }
 
 export interface PathSegmentBBox {
@@ -108,6 +115,7 @@ export interface ParsedPathStyleProps extends ParsedBaseStyleProps {
   markerStartOffset?: number;
   markerEndOffset?: number;
   isBillboard?: boolean;
+  isSizeAttenuation?: boolean;
 }
 export class Path extends DisplayObject<PathStyleProps, ParsedPathStyleProps> {
   private markerStartAngle = 0;
diff --git a/packages/g-lite/src/display-objects/Polyline.ts b/packages/g-lite/src/display-objects/Polyline.ts
index acdec3a07..51004c9ff 100644
--- a/packages/g-lite/src/display-objects/Polyline.ts
+++ b/packages/g-lite/src/display-objects/Polyline.ts
@@ -31,7 +31,14 @@ export interface PolylineStyleProps extends BaseStyleProps {
    * offset relative to original position
    */
   markerEndOffset?: number;
+  /**
+   * Whether the circle is billboard.
+   */
   isBillboard?: boolean;
+  /**
+   * Whether the circle is size attenuation.
+   */
+  isSizeAttenuation?: boolean;
 }
 export interface ParsedPolylineStyleProps extends ParsedBaseStyleProps {
   points: {
diff --git a/packages/g-lottie-player/CHANGELOG.md b/packages/g-lottie-player/CHANGELOG.md
index 289e944fb..faef200ac 100644
--- a/packages/g-lottie-player/CHANGELOG.md
+++ b/packages/g-lottie-player/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-lottie-player
 
+## 0.2.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 0.2.17
 
 ### Patch Changes
diff --git a/packages/g-lottie-player/package.json b/packages/g-lottie-player/package.json
index 093915ec1..a8fc0c5e4 100644
--- a/packages/g-lottie-player/package.json
+++ b/packages/g-lottie-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lottie-player",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "A lottie player for G",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-canvas-element/CHANGELOG.md b/packages/g-mobile-canvas-element/CHANGELOG.md
index 086d0cac7..2177c5fc0 100644
--- a/packages/g-mobile-canvas-element/CHANGELOG.md
+++ b/packages/g-mobile-canvas-element/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-mobile-canvas-element
 
+## 0.8.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 0.8.17
 
 ### Patch Changes
diff --git a/packages/g-mobile-canvas-element/package.json b/packages/g-mobile-canvas-element/package.json
index 488ce5641..e759b58b8 100644
--- a/packages/g-mobile-canvas-element/package.json
+++ b/packages/g-mobile-canvas-element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-canvas-element",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "description": "Create a CanvasLike element from existed context in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-canvas/CHANGELOG.md b/packages/g-mobile-canvas/CHANGELOG.md
index 976406218..3e5c6c405 100644
--- a/packages/g-mobile-canvas/CHANGELOG.md
+++ b/packages/g-mobile-canvas/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @antv/g-mobile-canvas
 
+## 0.11.11
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-canvas-renderer@1.9.20
+    -   @antv/g-plugin-canvas-path-generator@1.3.18
+    -   @antv/g-plugin-canvas-picker@1.10.20
+    -   @antv/g-plugin-dragndrop@1.8.18
+    -   @antv/g-plugin-gesture@1.2.6
+    -   @antv/g-plugin-mobile-interaction@0.9.18
+
 ## 0.11.10
 
 ### Patch Changes
diff --git a/packages/g-mobile-canvas/package.json b/packages/g-mobile-canvas/package.json
index a6334c46d..87126e8d0 100644
--- a/packages/g-mobile-canvas/package.json
+++ b/packages/g-mobile-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-canvas",
-  "version": "0.11.10",
+  "version": "0.11.11",
   "description": "A renderer implemented with Canvas2D API in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-svg/CHANGELOG.md b/packages/g-mobile-svg/CHANGELOG.md
index ee91be94e..f5cfddea1 100644
--- a/packages/g-mobile-svg/CHANGELOG.md
+++ b/packages/g-mobile-svg/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @antv/g-mobile-svg
 
+## 0.10.23
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-svg-renderer@1.10.22
+    -   @antv/g-plugin-dragndrop@1.8.18
+    -   @antv/g-plugin-gesture@1.2.6
+    -   @antv/g-plugin-mobile-interaction@0.9.18
+    -   @antv/g-plugin-svg-picker@1.9.22
+
 ## 0.10.22
 
 ### Patch Changes
diff --git a/packages/g-mobile-svg/package.json b/packages/g-mobile-svg/package.json
index d6ad5af3a..c35f86cba 100644
--- a/packages/g-mobile-svg/package.json
+++ b/packages/g-mobile-svg/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-svg",
-  "version": "0.10.22",
+  "version": "0.10.23",
   "description": "A renderer implemented by SVG in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-webgl/CHANGELOG.md b/packages/g-mobile-webgl/CHANGELOG.md
index e79c6ea67..04bae5c06 100644
--- a/packages/g-mobile-webgl/CHANGELOG.md
+++ b/packages/g-mobile-webgl/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @antv/g-mobile-webgl
 
+## 0.9.31
+
+### Patch Changes
+
+-   4fdee19f: Fix picking error when isBillboard enabled.
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-device-renderer@1.9.27
+    -   @antv/g-plugin-dragndrop@1.8.18
+    -   @antv/g-plugin-gesture@1.2.6
+    -   @antv/g-plugin-html-renderer@1.9.21
+    -   @antv/g-plugin-mobile-interaction@0.9.18
+
 ## 0.9.30
 
 ### Patch Changes
diff --git a/packages/g-mobile-webgl/package.json b/packages/g-mobile-webgl/package.json
index 7e49634e5..9c975fc95 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": "0.9.30",
+  "version": "0.9.31",
   "description": "A renderer implemented by WebGL1/2 in mobile environment",
   "keywords": [
     "antv",
@@ -45,7 +45,7 @@
     "@antv/g-plugin-html-renderer": "workspace:*",
     "@antv/g-plugin-image-loader": "workspace:*",
     "@antv/g-plugin-mobile-interaction": "workspace:*",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "@antv/util": "^3.3.4",
     "tslib": "^2.5.3"
   },
diff --git a/packages/g-pattern/CHANGELOG.md b/packages/g-pattern/CHANGELOG.md
index 58de235eb..358214ae9 100644
--- a/packages/g-pattern/CHANGELOG.md
+++ b/packages/g-pattern/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-pattern
 
+## 1.2.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.2.17
 
 ### Patch Changes
diff --git a/packages/g-pattern/package.json b/packages/g-pattern/package.json
index 98c29da62..b460477aa 100644
--- a/packages/g-pattern/package.json
+++ b/packages/g-pattern/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-pattern",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "description": "A pattern libs for G",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-3d/CHANGELOG.md b/packages/g-plugin-3d/CHANGELOG.md
index c84380061..6cf07ebe8 100644
--- a/packages/g-plugin-3d/CHANGELOG.md
+++ b/packages/g-plugin-3d/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-3d
 
+## 1.9.27
+
+### Patch Changes
+
+-   4fdee19f: Fix picking error when isBillboard enabled.
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-device-renderer@1.9.27
+
 ## 1.9.26
 
 ### Patch Changes
diff --git a/packages/g-plugin-3d/package.json b/packages/g-plugin-3d/package.json
index ca36775f5..d0b00323f 100644
--- a/packages/g-plugin-3d/package.json
+++ b/packages/g-plugin-3d/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-3d",
-  "version": "1.9.26",
+  "version": "1.9.27",
   "description": "Provide 3D extension for G",
   "keywords": [
     "antv",
@@ -41,7 +41,7 @@
     "@antv/g-lite": "workspace:*",
     "@antv/g-plugin-device-renderer": "workspace:*",
     "@antv/g-shader-components": "workspace:*",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "gl-matrix": "^3.4.3",
     "tslib": "^2.5.3"
   },
diff --git a/packages/g-plugin-a11y/CHANGELOG.md b/packages/g-plugin-a11y/CHANGELOG.md
index a13be550b..82e53cefc 100644
--- a/packages/g-plugin-a11y/CHANGELOG.md
+++ b/packages/g-plugin-a11y/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-a11y
 
+## 0.6.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 0.6.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-a11y/package.json b/packages/g-plugin-a11y/package.json
index 54eb99e87..6dda46c82 100644
--- a/packages/g-plugin-a11y/package.json
+++ b/packages/g-plugin-a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-a11y",
-  "version": "0.6.17",
+  "version": "0.6.18",
   "description": "A G plugin for accessibility",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-annotation/CHANGELOG.md b/packages/g-plugin-annotation/CHANGELOG.md
index 76ea9162d..49b90c43f 100644
--- a/packages/g-plugin-annotation/CHANGELOG.md
+++ b/packages/g-plugin-annotation/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-annotation
 
+## 0.4.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 0.4.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-annotation/package.json b/packages/g-plugin-annotation/package.json
index 130fc2f93..cd3dbf754 100644
--- a/packages/g-plugin-annotation/package.json
+++ b/packages/g-plugin-annotation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-annotation",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "description": "A G plugin for annotation",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-box2d/CHANGELOG.md b/packages/g-plugin-box2d/CHANGELOG.md
index 46ff69bb8..ae8258021 100644
--- a/packages/g-plugin-box2d/CHANGELOG.md
+++ b/packages/g-plugin-box2d/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-box2d
 
+## 1.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-box2d/package.json b/packages/g-plugin-box2d/package.json
index 3302b3f8f..856d42e9b 100644
--- a/packages/g-plugin-box2d/package.json
+++ b/packages/g-plugin-box2d/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-box2d",
-  "version": "1.9.17",
+  "version": "1.9.18",
   "description": "A G plugin for Box2D",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvas-path-generator/CHANGELOG.md b/packages/g-plugin-canvas-path-generator/CHANGELOG.md
index c17d03f19..bbe22c200 100644
--- a/packages/g-plugin-canvas-path-generator/CHANGELOG.md
+++ b/packages/g-plugin-canvas-path-generator/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-canvas-path-generator
 
+## 1.3.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.3.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvas-path-generator/package.json b/packages/g-plugin-canvas-path-generator/package.json
index 6d7f2e858..3343280e8 100644
--- a/packages/g-plugin-canvas-path-generator/package.json
+++ b/packages/g-plugin-canvas-path-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvas-path-generator",
-  "version": "1.3.17",
+  "version": "1.3.18",
   "description": "A G plugin of path generator with Canvas2D API",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvas-picker/CHANGELOG.md b/packages/g-plugin-canvas-picker/CHANGELOG.md
index 1dcce0e43..5d41c9667 100644
--- a/packages/g-plugin-canvas-picker/CHANGELOG.md
+++ b/packages/g-plugin-canvas-picker/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-canvas-picker
 
+## 1.10.20
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-canvas-renderer@1.9.20
+    -   @antv/g-plugin-canvas-path-generator@1.3.18
+
 ## 1.10.19
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvas-picker/package.json b/packages/g-plugin-canvas-picker/package.json
index f1cd3c912..ec75af1fe 100644
--- a/packages/g-plugin-canvas-picker/package.json
+++ b/packages/g-plugin-canvas-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvas-picker",
-  "version": "1.10.19",
+  "version": "1.10.20",
   "description": "A G plugin for picking in canvas",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvas-renderer/CHANGELOG.md b/packages/g-plugin-canvas-renderer/CHANGELOG.md
index b3704faa0..b3e5f18fa 100644
--- a/packages/g-plugin-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-canvas-renderer
 
+## 1.9.20
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-canvas-path-generator@1.3.18
+
 ## 1.9.19
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvas-renderer/package.json b/packages/g-plugin-canvas-renderer/package.json
index 005078d06..33fa72806 100644
--- a/packages/g-plugin-canvas-renderer/package.json
+++ b/packages/g-plugin-canvas-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvas-renderer",
-  "version": "1.9.19",
+  "version": "1.9.20",
   "description": "A G plugin of renderer implementation with Canvas2D API",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvaskit-renderer/CHANGELOG.md b/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
index b28dd66f4..aff68c2ae 100644
--- a/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
+++ b/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-canvaskit-renderer
 
+## 1.3.19
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+
 ## 1.3.18
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvaskit-renderer/package.json b/packages/g-plugin-canvaskit-renderer/package.json
index 729979049..0722dfbc0 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": "1.3.18",
+  "version": "1.3.19",
   "description": "A G plugin of renderer implementation with CanvasKit",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-control/CHANGELOG.md b/packages/g-plugin-control/CHANGELOG.md
index 3c17b8c5b..0f2a6670e 100644
--- a/packages/g-plugin-control/CHANGELOG.md
+++ b/packages/g-plugin-control/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-control
 
+## 1.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-control/package.json b/packages/g-plugin-control/package.json
index 33d017e60..a57c1144c 100644
--- a/packages/g-plugin-control/package.json
+++ b/packages/g-plugin-control/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-control",
-  "version": "1.9.17",
+  "version": "1.9.18",
   "description": "A G plugin for orbit control",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-css-select/CHANGELOG.md b/packages/g-plugin-css-select/CHANGELOG.md
index 8b59438e7..d3cde8bed 100644
--- a/packages/g-plugin-css-select/CHANGELOG.md
+++ b/packages/g-plugin-css-select/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-css-select
 
+## 1.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-css-select/package.json b/packages/g-plugin-css-select/package.json
index 2ec2a7e35..f11fb490e 100644
--- a/packages/g-plugin-css-select/package.json
+++ b/packages/g-plugin-css-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-css-select",
-  "version": "1.9.17",
+  "version": "1.9.18",
   "description": "A G plugin for using CSS select syntax in query selector",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-device-renderer/CHANGELOG.md b/packages/g-plugin-device-renderer/CHANGELOG.md
index b3ca02ae0..43c123a30 100644
--- a/packages/g-plugin-device-renderer/CHANGELOG.md
+++ b/packages/g-plugin-device-renderer/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-device-renderer
 
+## 1.9.27
+
+### Patch Changes
+
+-   4fdee19f: Fix picking error when isBillboard enabled.
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.26
 
 ### Patch Changes
diff --git a/packages/g-plugin-device-renderer/package.json b/packages/g-plugin-device-renderer/package.json
index 508b98e11..8f32537d2 100644
--- a/packages/g-plugin-device-renderer/package.json
+++ b/packages/g-plugin-device-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-device-renderer",
-  "version": "1.9.26",
+  "version": "1.9.27",
   "description": "A G plugin of renderer implementation with GPUDevice",
   "keywords": [
     "antv",
@@ -43,7 +43,7 @@
     "@antv/g-plugin-image-loader": "workspace:*",
     "@antv/g-shader-components": "workspace:*",
     "@antv/util": "^3.3.4",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "@webgpu/types": "^0.1.6",
     "earcut": "^2.2.3",
     "eventemitter3": "^5.0.1",
diff --git a/packages/g-plugin-device-renderer/src/PickingPlugin.ts b/packages/g-plugin-device-renderer/src/PickingPlugin.ts
index 237cc0a5d..5273e6e9a 100644
--- a/packages/g-plugin-device-renderer/src/PickingPlugin.ts
+++ b/packages/g-plugin-device-renderer/src/PickingPlugin.ts
@@ -359,7 +359,7 @@ export class PickingPlugin implements RenderingPlugin {
       },
       {
         name: SceneUniform.VIEWPORT,
-        value: [canvasWidth, canvasHeight],
+        value: [width, height],
       },
       {
         name: SceneUniform.IS_ORTHO,
diff --git a/packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts
index 165b49e61..a2c090e8b 100644
--- a/packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts
+++ b/packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts
@@ -179,6 +179,8 @@ export class InstancedLineDrawcall extends Instanced {
           markerStartOffset,
           markerEndOffset,
           isBillboard,
+          // @ts-ignore
+          isSizeAttenuation,
         } = (object as Polyline).parsedStyle;
         parsedLineStyleProps = {
           x1: points[0][0],
@@ -193,6 +195,7 @@ export class InstancedLineDrawcall extends Instanced {
           lineDash,
           lineDashOffset,
           isBillboard,
+          isSizeAttenuation,
           markerStart,
           markerEnd,
           markerStartOffset,
@@ -212,6 +215,7 @@ export class InstancedLineDrawcall extends Instanced {
           markerStartOffset,
           markerEndOffset,
           isBillboard,
+          isSizeAttenuation,
         } = (object as Path).parsedStyle;
         let mSegmentCount = 0;
         let mCommandIndex = 0;
@@ -239,6 +243,7 @@ export class InstancedLineDrawcall extends Instanced {
           lineDash,
           lineDashOffset,
           isBillboard,
+          isSizeAttenuation,
           markerStart,
           markerEnd,
           markerStartOffset,
@@ -247,8 +252,19 @@ export class InstancedLineDrawcall extends Instanced {
         totalLength = (object as Path).getTotalLength();
       }
 
-      const { x1, y1, x2, y2, z1, z2, defX, defY, lineCap, isBillboard } =
-        parsedLineStyleProps;
+      const {
+        x1,
+        y1,
+        x2,
+        y2,
+        z1,
+        z2,
+        defX,
+        defY,
+        lineCap,
+        isBillboard,
+        isSizeAttenuation,
+      } = parsedLineStyleProps;
 
       const { startOffsetX, startOffsetY, endOffsetX, endOffsetY } =
         this.calcOffset(parsedLineStyleProps);
@@ -263,8 +279,8 @@ export class InstancedLineDrawcall extends Instanced {
         dashOffset,
         dashSegmentPercent,
         dashRatioInEachSegment,
-        // isBillboard
-        isBillboard ? 1 : 0,
+        // isSizeAttenuation
+        isBillboard || isSizeAttenuation ? 1 : 0,
       );
 
       interleaved.push(
@@ -399,6 +415,8 @@ export class InstancedLineDrawcall extends Instanced {
             markerStartOffset,
             markerEndOffset,
             isBillboard,
+            // @ts-ignore
+            isSizeAttenuation,
           } = (object as Polyline).parsedStyle;
           parsedLineStyleProps = {
             x1: points[0][0],
@@ -410,6 +428,7 @@ export class InstancedLineDrawcall extends Instanced {
             defX,
             defY,
             lineCap,
+            isSizeAttenuation,
             isBillboard,
             markerStart,
             markerEnd,
@@ -427,6 +446,7 @@ export class InstancedLineDrawcall extends Instanced {
             markerStartOffset,
             markerEndOffset,
             isBillboard,
+            isSizeAttenuation,
           } = (object as Path).parsedStyle;
           parsedLineStyleProps = {
             x1: absolutePath[0][1],
@@ -439,6 +459,7 @@ export class InstancedLineDrawcall extends Instanced {
             defY,
             lineCap,
             isBillboard,
+            isSizeAttenuation,
             markerStart,
             markerEnd,
             markerStartOffset,
@@ -468,6 +489,7 @@ export class InstancedLineDrawcall extends Instanced {
     } else if (
       name === 'lineDashOffset' ||
       name === 'lineDash' ||
+      name === 'isSizeAttenuation' ||
       name === 'isBillboard'
     ) {
       const packed: number[] = [];
@@ -479,8 +501,10 @@ export class InstancedLineDrawcall extends Instanced {
         packed.push(
           dashOffset,
           dashSegmentPercent,
-          dashRatioInEachSegment, // isBillboard
-          object.parsedStyle.isBillboard ? 1 : 0,
+          dashRatioInEachSegment,
+          object.parsedStyle.isBillboard || object.parsedStyle.isSizeAttenuation
+            ? 1
+            : 0, // isSizeAttenuation
         );
       });
 
diff --git a/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts
index 49aa5f04d..286fbb0a3 100644
--- a/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts
+++ b/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts
@@ -15,7 +15,7 @@ import {
   convertToPath,
 } from '@antv/g-lite';
 import { mat4 } from 'gl-matrix';
-import { arcToCubic } from '@antv/util';
+import { arcToCubic, isNil } from '@antv/util';
 import earcut from 'earcut';
 import { Format, VertexStepMode } from '@antv/g-device-api';
 import frag from '../shader/line.frag';
@@ -32,6 +32,7 @@ import { LightPool } from '../LightPool';
 import { bezierCurveTo, quadCurveTo } from '../utils';
 import { InstancedFillDrawcall } from './InstancedFill';
 import { BatchContext } from '../renderer';
+import { RENDER_ORDER_SCALE } from '../renderer/Batch';
 
 enum LineVertexAttributeBufferIndex {
   PACKED = VertexAttributeBufferIndex.POSITION + 1,
@@ -53,6 +54,22 @@ enum LineVertexAttributeLocation {
 
 const SEGMENT_NUM = 12;
 
+function packBoolean(a: boolean, b: boolean, c: boolean) {
+  return (a ? 1 : 0) * 4 + (b ? 1 : 0) * 2 + (c ? 1 : 0);
+}
+
+function is3DPolyline(object: DisplayObject) {
+  const isPolyline = object.nodeName === Shape.POLYLINE;
+  if (!isPolyline) {
+    return false;
+  }
+  // Polyline supports 3 dimensions so that each point is shaped like [x, y, z].
+  const polylineControlPoints = (object as Polyline).parsedStyle.points.points;
+  const length = polylineControlPoints.length;
+
+  return length && !isNil(polylineControlPoints[0][2]);
+}
+
 /**
  * Used for Curve only contains 2 commands, e.g. [[M], [C | Q | A]]
  */
@@ -161,14 +178,15 @@ export class InstancedPathDrawcall extends Instanced {
         this.calcSubpathIndex(object),
       );
 
-      const { lineDash, lineDashOffset, isBillboard } = (object as Path)
-        .parsedStyle;
+      const { lineDash, lineDashOffset, isBillboard, isSizeAttenuation } = (
+        object as Path
+      ).parsedStyle;
 
       packedDash.push(
         (lineDash && lineDash[0]) || 0, // DASH
         (lineDash && lineDash[1]) || 0, // GAP
         lineDashOffset || 0,
-        isBillboard ? 1 : 0,
+        packBoolean(isBillboard, isSizeAttenuation, is3DPolyline(object)),
       );
 
       instancedCount += count;
@@ -290,7 +308,6 @@ export class InstancedPathDrawcall extends Instanced {
 
       // this attribute only changes for each n instance
       this.divisor = instancedCount / objects.length;
-
       this.geometry.setVertexBuffer({
         bufferIndex: LineVertexAttributeBufferIndex.DASH,
         byteStride: 4 * 4,
@@ -402,24 +419,26 @@ export class InstancedPathDrawcall extends Instanced {
     } else if (
       name === 'lineDashOffset' ||
       name === 'lineDash' ||
-      name === 'isBillboard'
+      name === 'isBillboard' ||
+      name === 'isSizeAttenuation'
     ) {
       const packedDash: number[] = [];
       objects.forEach((object) => {
-        const { lineDash, lineDashOffset, isBillboard } = (object as Path)
-          .parsedStyle;
+        const { lineDash, lineDashOffset, isBillboard, isSizeAttenuation } = (
+          object as Path
+        ).parsedStyle;
 
         packedDash.push(
           (lineDash && lineDash[0]) || 0, // DASH
           (lineDash && lineDash[1]) || 0, // GAP
           lineDashOffset || 0,
-          isBillboard ? 1 : 0,
+          packBoolean(isBillboard, isSizeAttenuation, is3DPolyline(object)),
         );
       });
 
       this.geometry.updateVertexBuffer(
         LineVertexAttributeBufferIndex.DASH,
-        LineVertexAttributeBufferIndex.DASH,
+        LineVertexAttributeLocation.DASH,
         startIndex,
         new Uint8Array(new Float32Array(packedDash).buffer),
       );
@@ -453,6 +472,7 @@ export function updateBuffer(
   subPathIndex = 0,
 ) {
   const { lineCap, lineJoin } = object.parsedStyle as ParsedBaseStyleProps;
+  const zIndex = object.sortable.renderOrder * RENDER_ORDER_SCALE;
   let { defX, defY } = object.parsedStyle;
   const { markerStart, markerEnd, markerStartOffset, markerEndOffset } =
     object.parsedStyle as ParsedLineStyleProps;
@@ -493,6 +513,7 @@ export function updateBuffer(
       endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
     }
 
+    const isPolyline = object.nodeName === Shape.POLYLINE;
     points[0] = polylineControlPoints.reduce((prev, cur, i) => {
       let offsetX = 0;
       let offsetY = 0;
@@ -504,7 +525,11 @@ export function updateBuffer(
         offsetY = endOffsetY;
       }
 
-      prev.push(cur[0] - defX + offsetX, cur[1] - defY + offsetY, cur[2] || 0);
+      prev.push(
+        cur[0] - defX + offsetX,
+        cur[1] - defY + offsetY,
+        isPolyline ? cur[2] || 0 : zIndex,
+      );
       return prev;
     }, [] as number[]);
 
@@ -520,15 +545,15 @@ export function updateBuffer(
           instancedCount: Math.round(points[0].length / stridePoints),
         };
       } else {
-        points[0].push(points[0][0], points[0][1], points[0][2] || 0);
+        points[0].push(points[0][0], points[0][1], points[0][2] || zIndex);
         points[0].push(
           ...addTailSegment(
             points[0][0],
             points[0][1],
-            points[0][2] || 0,
+            points[0][2] || zIndex,
             points[0][3],
             points[0][4],
-            points[0][5] || 0,
+            points[0][5] || zIndex,
           ),
         );
       }
@@ -620,23 +645,23 @@ export function updateBuffer(
           points[mCommandsNum].push(
             params[0] - defX + startOffsetX,
             params[1] - defY + startOffsetY,
-            0,
+            zIndex,
             params[0] - defX,
             params[1] - defY,
-            0,
+            zIndex,
           );
         } else {
-          points[mCommandsNum].push(params[0] - defX, params[1] - defY, 0);
+          points[mCommandsNum].push(params[0] - defX, params[1] - defY, zIndex);
         }
       } else if (command === 'L') {
         if (useEndOffset) {
           points[mCommandsNum].push(
             params[0] - defX + endOffsetX,
             params[1] - defY + endOffsetY,
-            0,
+            zIndex,
           );
         } else {
-          points[mCommandsNum].push(params[0] - defX, params[1] - defY, 0);
+          points[mCommandsNum].push(params[0] - defX, params[1] - defY, zIndex);
         }
       } else if (command === 'Q') {
         quadCurveTo(
@@ -651,7 +676,7 @@ export function updateBuffer(
           points[mCommandsNum].push(
             params[2] - defX + endOffsetX,
             params[3] - defY + endOffsetY,
-            0,
+            zIndex,
           );
         }
       } else if (command === 'A') {
@@ -688,7 +713,7 @@ export function updateBuffer(
           points[mCommandsNum].push(
             params[5] - defX + endOffsetX,
             params[6] - defY + endOffsetY,
-            0,
+            zIndex,
           );
         }
       } else if (command === 'C') {
@@ -706,7 +731,7 @@ export function updateBuffer(
           points[mCommandsNum].push(
             params[4] - defX + endOffsetX,
             params[5] - defY + endOffsetY,
-            0,
+            zIndex,
           );
         }
       } else if (
@@ -728,7 +753,7 @@ export function updateBuffer(
           points[mCommandsNum].push(
             points[mCommandsNum][startPointIndex],
             points[mCommandsNum][startPointIndex + 1],
-            0,
+            zIndex,
           );
         }
 
@@ -810,15 +835,15 @@ export function updateBuffer(
     }
     pointsBuffer[j++] = points[points.length - 6];
     pointsBuffer[j++] = points[points.length - 5];
-    pointsBuffer[j++] = points[points.length - 4] || 0;
+    pointsBuffer[j++] = points[points.length - 4] || zIndex;
     pointsBuffer[j++] = 0;
     pointsBuffer[0] = points[0];
     pointsBuffer[1] = points[1];
-    pointsBuffer[2] = points[2] || 0;
+    pointsBuffer[2] = points[2] || zIndex;
     pointsBuffer[3] = 0;
     pointsBuffer[4] = points[3];
     pointsBuffer[5] = points[4];
-    pointsBuffer[6] = points[5] || 0;
+    pointsBuffer[6] = points[5] || zIndex;
     pointsBuffer[7] = capType === JOINT_TYPE.CAP_ROUND ? capType : 0;
 
     const instancedCount = Math.round(points.length / stridePoints);
diff --git a/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts b/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts
index 0b200b1f9..337384d73 100644
--- a/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts
+++ b/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts
@@ -80,10 +80,11 @@ export class SDFDrawcall extends Instanced {
       const size = this.getSize(object.parsedStyle, circle.nodeName);
       instanced.push(
         ...size,
+        circle.parsedStyle.isBillboard ? 1 : 0,
+        circle.parsedStyle.isSizeAttenuation ? 1 : 0,
         SDF_Shape.indexOf(circle.nodeName),
         (radius && radius[0]) || 0,
         omitStroke ? 1 : 0,
-        circle.parsedStyle.isBillboard ? 1 : 0,
       );
     });
 
@@ -111,18 +112,18 @@ export class SDFDrawcall extends Instanced {
     });
     this.geometry.setVertexBuffer({
       bufferIndex: SDFVertexAttributeBufferIndex.PACKED_STYLE,
-      byteStride: 4 * 6,
+      byteStride: 4 * 7,
       stepMode: VertexStepMode.INSTANCE,
       attributes: [
         {
-          format: Format.F32_RG,
+          format: Format.F32_RGBA,
           bufferByteOffset: 4 * 0,
           location: SDFVertexAttributeLocation.SIZE,
           divisor: 1,
         },
         {
-          format: Format.F32_RGBA,
-          bufferByteOffset: 4 * 2,
+          format: Format.F32_RGB,
+          bufferByteOffset: 4 * 4,
           location: SDFVertexAttributeLocation.PACKED_STYLE3,
           divisor: 1,
         },
@@ -152,7 +153,8 @@ export class SDFDrawcall extends Instanced {
       name === 'lineDash' ||
       name === 'strokeOpacity' ||
       name === 'radius' ||
-      name === 'isBillboard'
+      name === 'isBillboard' ||
+      name === 'isSizeAttenuation'
     ) {
       const packed: number[] = [];
       objects.forEach((object) => {
@@ -166,10 +168,11 @@ export class SDFDrawcall extends Instanced {
         const size = [halfWidth, halfHeight];
         packed.push(
           ...size,
+          circle.parsedStyle.isBillboard ? 1 : 0,
+          circle.parsedStyle.isSizeAttenuation ? 1 : 0,
           SDF_Shape.indexOf(object.nodeName),
           (object.parsedStyle.radius && object.parsedStyle.radius[0]) || 0,
           omitStroke ? 1 : 0,
-          circle.parsedStyle.isBillboard ? 1 : 0,
         );
       });
       this.geometry.updateVertexBuffer(
diff --git a/packages/g-plugin-device-renderer/src/shader/image.frag b/packages/g-plugin-device-renderer/src/shader/image.frag
index eb8d830a4..52212be1f 100644
--- a/packages/g-plugin-device-renderer/src/shader/image.frag
+++ b/packages/g-plugin-device-renderer/src/shader/image.frag
@@ -6,6 +6,8 @@
 
 out vec4 outputColor;
 
+float epsilon = 0.000001;
+
 void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.frag')
   #pragma glslify: import('@antv/g-shader-components/map.frag')
@@ -23,5 +25,9 @@ void main() {
   } else {
     outputColor = u_Color;
     outputColor.a = outputColor.a * u_Opacity;
+
+    if (outputColor.a < epsilon) {
+      discard;
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/g-plugin-device-renderer/src/shader/instanced-line.frag b/packages/g-plugin-device-renderer/src/shader/instanced-line.frag
index 36a1fd495..813ca69e8 100644
--- a/packages/g-plugin-device-renderer/src/shader/instanced-line.frag
+++ b/packages/g-plugin-device-renderer/src/shader/instanced-line.frag
@@ -8,6 +8,7 @@ in vec4 v_Dash;
 in vec2 v_Distance;
 
 out vec4 outputColor;
+float epsilon = 0.000001;
 
 void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.frag')
@@ -38,5 +39,9 @@ void main() {
       * blur
       * u_Opacity * u_StrokeOpacity
       * (u_dash_array < 1.0 ? (ceil((u_dash_array * u_dash_ratio) - mod(v_Dash.x + u_dash_offset, u_dash_array))) : 1.0);
+
+    if (outputColor.a < epsilon) {
+      discard;
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/g-plugin-device-renderer/src/shader/instanced-line.vert b/packages/g-plugin-device-renderer/src/shader/instanced-line.vert
index 4e637e38b..2d983282b 100644
--- a/packages/g-plugin-device-renderer/src/shader/instanced-line.vert
+++ b/packages/g-plugin-device-renderer/src/shader/instanced-line.vert
@@ -16,10 +16,6 @@ layout(location = DASH) in vec4 a_Dash;
 out vec4 v_Dash;
 out vec2 v_Distance;
 
-bool isPerspectiveMatrix(mat4 m) {
-  return m[ 2 ][ 3 ] == - 1.0;
-}
-
 void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.vert')
   #pragma glslify: import('@antv/g-shader-components/uv.vert')
@@ -32,9 +28,8 @@ void main() {
   }
   float clampedStrokeWidth = max(strokeWidth, 1.0);
 
-  float isBillboard = a_Dash.w;
-  if (isBillboard > 0.5) {
-    // clip space
+  bool isSizeAttenuation = a_Dash.w > 0.5;
+  if (isSizeAttenuation) {
     vec4 clip0 = project(vec4(a_PointA, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
     vec4 clip1 = project(vec4(a_PointB, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
     // screen space
diff --git a/packages/g-plugin-device-renderer/src/shader/line.frag b/packages/g-plugin-device-renderer/src/shader/line.frag
index b4f41cd3d..0d4681b2e 100644
--- a/packages/g-plugin-device-renderer/src/shader/line.frag
+++ b/packages/g-plugin-device-renderer/src/shader/line.frag
@@ -13,6 +13,7 @@ in float v_Travel;
 in float v_ScalingFactor;
 
 out vec4 outputColor;
+float epsilon = 0.000001;
 
 void main(){
   #pragma glslify: import('@antv/g-shader-components/batch.frag')
@@ -82,5 +83,8 @@ void main(){
     #endif
 
     outputColor.a *= alpha * u_Opacity * u_StrokeOpacity;
+    if (outputColor.a < epsilon) {
+      discard;
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/g-plugin-device-renderer/src/shader/line.vert b/packages/g-plugin-device-renderer/src/shader/line.vert
index 5ae1be21c..1fa0037b5 100644
--- a/packages/g-plugin-device-renderer/src/shader/line.vert
+++ b/packages/g-plugin-device-renderer/src/shader/line.vert
@@ -2,6 +2,7 @@
 
 #pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
 #pragma glslify: project = require('@antv/g-shader-components/project.vert')
+#pragma glslify: billboard = require('@antv/g-shader-components/billboard.vert')
 
 layout(location = PREV) in vec3 a_Prev;
 layout(location = POINT1) in vec3 a_Point1;
@@ -61,8 +62,7 @@ vec2 doBisect(
   return dy * bisect;
 }
 
-vec2 project2ScreenSpace(vec3 pos, mat4 u_ModelMatrix) {
-  vec4 clip = project(vec4(pos, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+vec2 clip2ScreenSpace(vec4 clip) {
   return u_Viewport * (0.5 * clip.xy / clip.w + 0.5);
 }
 
@@ -77,14 +77,27 @@ void main() {
   vec4 clip0;
   vec4 clip1;
 
-  float isBillboard = a_Dash.w;
-  if (isBillboard > 0.5) {
-    // clip space
+  float compressed = a_Dash.w;
+  float is_billboard = floor(compressed / 4.0);
+  compressed -= is_billboard * 4.0;
+  float is_size_attenuation = floor(compressed / 2.0);
+  compressed -= is_size_attenuation * 2.0;
+  float is_3d_polyline = compressed;
+
+  bool isBillboard = is_billboard > 0.5;
+  bool isSizeAttenuation = is_size_attenuation > 0.5;
+  bool is3DPolyline = is_3d_polyline > 0.5;
+  if (isBillboard) {
+    clip0 = billboard(a_Point1.xy, 0.0, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+    clip1 = billboard(a_Point2.xy, 0.0, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+  } else if (is3DPolyline) {
     clip0 = project(vec4(a_Point1, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
     clip1 = project(vec4(a_Point2, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
-    // screen space
-    pointA = project2ScreenSpace(a_Point1, u_ModelMatrix);
-    pointB = project2ScreenSpace(a_Point2, u_ModelMatrix);
+  }
+
+  if (isBillboard || is3DPolyline) {
+    pointA = clip2ScreenSpace(clip0);
+    pointB = clip2ScreenSpace(clip1);
   } else {
     pointA = (u_ModelMatrix * vec4(a_Point1, 1.0)).xy;
     pointB = (u_ModelMatrix * vec4(a_Point2, 1.0)).xy;
@@ -141,18 +154,22 @@ void main() {
     float flag = 0.0;
     float sign2 = 1.0;
     if (a_VertexNum < 0.5 || a_VertexNum > 2.5 && a_VertexNum < 3.5) {
-      if (isBillboard > 0.5) {
-        next = project2ScreenSpace(a_Prev, u_ModelMatrix);
+      if (isBillboard) {
+        next = clip2ScreenSpace(billboard(a_Prev.xy, 0.0, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix));
+      } else if (is3DPolyline) {
+        next = clip2ScreenSpace(project(vec4(a_Prev, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix));
       } else {
         next = (u_ModelMatrix * vec4(a_Prev, 1.0)).xy;
-      }      
+      }
 
       base = pointA;
       flag = type - floor(type / 2.0) * 2.0;
       sign2 = -1.0;
     } else {
-      if (isBillboard > 0.5) {
-        next = project2ScreenSpace(a_Next, u_ModelMatrix);
+      if (isBillboard) {
+        next = clip2ScreenSpace(billboard(a_Next.xy, 0.0, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix));
+      } else if (is3DPolyline) {
+        next = clip2ScreenSpace(project(vec4(a_Next, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix));
       } else {
         next = (u_ModelMatrix * vec4(a_Next, 1.0)).xy;
       }
@@ -361,7 +378,7 @@ void main() {
 
   v_ScalingFactor = sqrt(u_ModelMatrix[0][0] * u_ModelMatrix[0][0] + u_ModelMatrix[0][1] * u_ModelMatrix[0][1] + u_ModelMatrix[0][2] * u_ModelMatrix[0][2]);
 
-  if (isBillboard > 0.5) {
+  if (isBillboard || is3DPolyline) {
     vec4 clip = mix(clip0, clip1, 0.5);
     gl_Position = vec4(clip.w * (2.0 * pos / u_Viewport - 1.0), clip.z, clip.w);
   } else {
diff --git a/packages/g-plugin-device-renderer/src/shader/sdf.frag b/packages/g-plugin-device-renderer/src/shader/sdf.frag
index 6c59a60ee..6de690fe1 100644
--- a/packages/g-plugin-device-renderer/src/shader/sdf.frag
+++ b/packages/g-plugin-device-renderer/src/shader/sdf.frag
@@ -6,9 +6,10 @@
 
 in vec2 v_Data;
 in vec2 v_Radius;
-in vec4 v_StylePacked3;
+in vec3 v_StylePacked3;
 
 out vec4 outputColor;
+float epsilon = 0.000001;
 
 #pragma glslify: sdCircle = require('@antv/g-shader-components/sdf.circle.glsl')
 #pragma glslify: sdEllipsoidApproximated = require('@antv/g-shader-components/sdf.ellipse.glsl')
@@ -16,7 +17,6 @@ out vec4 outputColor;
 
 void main() {
   int shape = int(floor(v_StylePacked3.x + 0.5));
-  float epsilon = 0.000001;
 
   #pragma glslify: import('@antv/g-shader-components/batch.frag')
   #pragma glslify: import('@antv/g-shader-components/map.frag')
diff --git a/packages/g-plugin-device-renderer/src/shader/sdf.vert b/packages/g-plugin-device-renderer/src/shader/sdf.vert
index 8cab3266b..ec3f41a90 100644
--- a/packages/g-plugin-device-renderer/src/shader/sdf.vert
+++ b/packages/g-plugin-device-renderer/src/shader/sdf.vert
@@ -6,8 +6,8 @@
 
 layout(location = POSITION) in vec2 a_Extrude;
 // shape, radius, omitStroke, isBillboard
-layout(location = PACKED_STYLE3) in vec4 a_StylePacked3;
-layout(location = SIZE) in vec2 a_Size;
+layout(location = PACKED_STYLE3) in vec3 a_StylePacked3;
+layout(location = SIZE) in vec4 a_Size;
 #ifdef USE_UV
   layout(location = UV) in vec2 a_Uv;
   out vec2 v_Uv;
@@ -15,7 +15,7 @@ layout(location = SIZE) in vec2 a_Size;
 
 out vec2 v_Data;
 out vec2 v_Radius;
-out vec4 v_StylePacked3;
+out vec3 v_StylePacked3;
 
 void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.vert')
@@ -29,13 +29,13 @@ void main() {
   }
 
   bool omitStroke = a_StylePacked3.z == 1.0;
-  vec2 radius = a_Size + vec2(omitStroke ? 0.0 : strokeWidth / 2.0);
-  vec2 offset = (a_Extrude + vec2(1.0) - 2.0 * u_Anchor.xy) * a_Size + a_Extrude * vec2(omitStroke ? 0.0 : strokeWidth / 2.0);
+  vec2 radius = a_Size.xy + vec2(omitStroke ? 0.0 : strokeWidth / 2.0);
+  vec2 offset = (a_Extrude + vec2(1.0) - 2.0 * u_Anchor.xy) * a_Size.xy + a_Extrude * vec2(omitStroke ? 0.0 : strokeWidth / 2.0);
 
-  bool isBillboard = a_StylePacked3.w > 0.5;
+  bool isBillboard = a_Size.z > 0.5;
   if (isBillboard) {
     float rotation = 0.0;
-    bool isSizeAttenuation = false;
+    bool isSizeAttenuation = a_Size.w > 0.5;
     gl_Position = billboard(offset, rotation, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
   } else {
     gl_Position = project(vec4(offset, u_ZIndex, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
diff --git a/packages/g-plugin-device-renderer/src/shader/text.frag b/packages/g-plugin-device-renderer/src/shader/text.frag
index 2f954e8b8..0857d2b0f 100644
--- a/packages/g-plugin-device-renderer/src/shader/text.frag
+++ b/packages/g-plugin-device-renderer/src/shader/text.frag
@@ -8,6 +8,7 @@ uniform sampler2D u_SDFMap;
 #define SDF_PX 8.0
 
 out vec4 outputColor;
+float epsilon = 0.000001;
 
 void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.frag')
@@ -36,7 +37,7 @@ void main() {
     outputColor = vec4(u_PickingColor, 1.0);
   } else {
 
-    if (opacity < 0.001) {
+    if (opacity < epsilon) {
       discard;
     }
 
diff --git a/packages/g-plugin-dom-interaction/CHANGELOG.md b/packages/g-plugin-dom-interaction/CHANGELOG.md
index 4f3fe01e3..ac0a35fc6 100644
--- a/packages/g-plugin-dom-interaction/CHANGELOG.md
+++ b/packages/g-plugin-dom-interaction/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-dom-interaction
 
+## 1.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-dom-interaction/package.json b/packages/g-plugin-dom-interaction/package.json
index ea7592b34..beff8784e 100644
--- a/packages/g-plugin-dom-interaction/package.json
+++ b/packages/g-plugin-dom-interaction/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-dom-interaction",
-  "version": "1.9.17",
+  "version": "1.9.18",
   "description": "A G plugin",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-dragndrop/CHANGELOG.md b/packages/g-plugin-dragndrop/CHANGELOG.md
index d477e0cbc..f0af668a4 100644
--- a/packages/g-plugin-dragndrop/CHANGELOG.md
+++ b/packages/g-plugin-dragndrop/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-dragndrop
 
+## 1.8.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.8.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-dragndrop/package.json b/packages/g-plugin-dragndrop/package.json
index a070b1e8e..2da0f607a 100644
--- a/packages/g-plugin-dragndrop/package.json
+++ b/packages/g-plugin-dragndrop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-dragndrop",
-  "version": "1.8.17",
+  "version": "1.8.18",
   "description": "A G plugin for Drag n Drop implemented with PointerEvents",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-gesture/CHANGELOG.md b/packages/g-plugin-gesture/CHANGELOG.md
index 216a4bb8e..fac36e464 100644
--- a/packages/g-plugin-gesture/CHANGELOG.md
+++ b/packages/g-plugin-gesture/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-gesture
 
+## 1.2.6
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.2.5
 
 ### Patch Changes
diff --git a/packages/g-plugin-gesture/package.json b/packages/g-plugin-gesture/package.json
index 1a04c39ed..09c270024 100644
--- a/packages/g-plugin-gesture/package.json
+++ b/packages/g-plugin-gesture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-gesture",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A G plugin for Gesture implemented with PointerEvents",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-html-renderer/CHANGELOG.md b/packages/g-plugin-html-renderer/CHANGELOG.md
index 3c80ce05d..c317ed36a 100644
--- a/packages/g-plugin-html-renderer/CHANGELOG.md
+++ b/packages/g-plugin-html-renderer/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-html-renderer
 
+## 1.9.21
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.20
 
 ### Patch Changes
diff --git a/packages/g-plugin-html-renderer/package.json b/packages/g-plugin-html-renderer/package.json
index 605937433..e87f37391 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": "1.9.20",
+  "version": "1.9.21",
   "description": "A G plugin for rendering HTML",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-image-loader/CHANGELOG.md b/packages/g-plugin-image-loader/CHANGELOG.md
index 60e444197..a2334812d 100644
--- a/packages/g-plugin-image-loader/CHANGELOG.md
+++ b/packages/g-plugin-image-loader/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-image-loader
 
+## 1.3.18
+
+### Patch Changes
+
+-   4fdee19f: Keep aspect ration in image.
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.3.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-image-loader/package.json b/packages/g-plugin-image-loader/package.json
index 0d3b8e655..22e751e35 100644
--- a/packages/g-plugin-image-loader/package.json
+++ b/packages/g-plugin-image-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-image-loader",
-  "version": "1.3.17",
+  "version": "1.3.18",
   "description": "A G plugin for loading image",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-image-loader/src/ImagePool.ts b/packages/g-plugin-image-loader/src/ImagePool.ts
index dd52c8dfa..0142c1641 100644
--- a/packages/g-plugin-image-loader/src/ImagePool.ts
+++ b/packages/g-plugin-image-loader/src/ImagePool.ts
@@ -28,16 +28,16 @@ export class ImagePool {
 
   constructor(private canvasConfig: Partial<CanvasConfig>) {}
 
-  getImageSync(src: string, callback?: () => void) {
+  getImageSync(src: string, callback?: (img: HTMLImageElement) => void) {
     if (!this.imageCache[src]) {
-      this.getOrCreateImage(src).then(() => {
+      this.getOrCreateImage(src).then((img) => {
         if (callback) {
-          callback();
+          callback(img);
         }
       });
     } else {
       if (callback) {
-        callback();
+        callback(this.imageCache[src]);
       }
     }
 
diff --git a/packages/g-plugin-image-loader/src/LoadImagePlugin.ts b/packages/g-plugin-image-loader/src/LoadImagePlugin.ts
index 196d3eb31..151f73343 100644
--- a/packages/g-plugin-image-loader/src/LoadImagePlugin.ts
+++ b/packages/g-plugin-image-loader/src/LoadImagePlugin.ts
@@ -1,28 +1,47 @@
 import type {
   DisplayObject,
   FederatedEvent,
+  Image,
   MutationEvent,
   RenderingPlugin,
   RenderingPluginContext,
 } from '@antv/g-lite';
 import { ElementEvent, Shape } from '@antv/g-lite';
 import { isString } from '@antv/util';
+import { ImagePool } from './ImagePool';
 
 export class LoadImagePlugin implements RenderingPlugin {
   static tag = 'LoadImage';
 
-  apply(context: RenderingPluginContext) {
-    // @ts-ignore
+  apply(context: RenderingPluginContext & { imagePool: ImagePool }) {
     const { renderingService, renderingContext, imagePool } = context;
     const canvas = renderingContext.root.ownerDocument.defaultView;
+
+    const calculateWithAspectRatio = (
+      object: Image,
+      imageWidth: number,
+      imageHeight: number,
+    ) => {
+      const { width, height } = object.parsedStyle;
+      if (width && !height) {
+        object.setAttribute('height', (imageHeight / imageWidth) * width);
+      } else if (!width && height) {
+        object.setAttribute('width', (imageWidth / imageHeight) * height);
+      }
+    };
+
     const handleMounted = (e: FederatedEvent) => {
-      const object = e.target as DisplayObject;
+      const object = e.target as Image;
       const { nodeName, attributes } = object;
       if (nodeName === Shape.IMAGE) {
-        const { img } = attributes;
+        const { img, keepAspectRatio } = attributes;
 
         if (isString(img)) {
-          imagePool.getImageSync(img, () => {
+          imagePool.getImageSync(img, ({ width, height }) => {
+            if (keepAspectRatio) {
+              calculateWithAspectRatio(object, width, height);
+            }
+
             // set dirty rectangle flag
             object.renderable.dirty = true;
             renderingService.dirtify();
@@ -38,7 +57,11 @@ export class LoadImagePlugin implements RenderingPlugin {
       if (object.nodeName === Shape.IMAGE) {
         if (attrName === 'img') {
           if (isString(newValue)) {
-            imagePool.getOrCreateImage(newValue).then(() => {
+            imagePool.getOrCreateImage(newValue).then(({ width, height }) => {
+              if (object.attributes.keepAspectRatio) {
+                calculateWithAspectRatio(object, width, height);
+              }
+
               // set dirty rectangle flag
               object.renderable.dirty = true;
               renderingService.dirtify();
diff --git a/packages/g-plugin-matterjs/CHANGELOG.md b/packages/g-plugin-matterjs/CHANGELOG.md
index 145e84e0a..09aa1b14b 100644
--- a/packages/g-plugin-matterjs/CHANGELOG.md
+++ b/packages/g-plugin-matterjs/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-matterjs
 
+## 1.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-matterjs/package.json b/packages/g-plugin-matterjs/package.json
index aa2a25096..3510cf008 100644
--- a/packages/g-plugin-matterjs/package.json
+++ b/packages/g-plugin-matterjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-matterjs",
-  "version": "1.9.17",
+  "version": "1.9.18",
   "description": "A G plugin for matter.js physics engine",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-mobile-interaction/CHANGELOG.md b/packages/g-plugin-mobile-interaction/CHANGELOG.md
index 6a6a0c577..f2a468c17 100644
--- a/packages/g-plugin-mobile-interaction/CHANGELOG.md
+++ b/packages/g-plugin-mobile-interaction/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-mobile-interaction
 
+## 0.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 0.9.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-mobile-interaction/package.json b/packages/g-plugin-mobile-interaction/package.json
index cfaa58f13..f47a579d9 100644
--- a/packages/g-plugin-mobile-interaction/package.json
+++ b/packages/g-plugin-mobile-interaction/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-mobile-interaction",
-  "version": "0.9.17",
+  "version": "0.9.18",
   "description": "A G plugin listening events in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-physx/CHANGELOG.md b/packages/g-plugin-physx/CHANGELOG.md
index 74bae78f0..e0fe87083 100644
--- a/packages/g-plugin-physx/CHANGELOG.md
+++ b/packages/g-plugin-physx/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-physx
 
+## 1.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-physx/package.json b/packages/g-plugin-physx/package.json
index 8394e02e8..f338183e5 100644
--- a/packages/g-plugin-physx/package.json
+++ b/packages/g-plugin-physx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-physx",
-  "version": "1.9.17",
+  "version": "1.9.18",
   "description": "A G plugin for PhysX",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md b/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
index d338b7f59..e7a885c38 100644
--- a/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-rough-canvas-renderer
 
+## 1.9.23
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-canvas@1.11.23
+
 ## 1.9.22
 
 ### Patch Changes
diff --git a/packages/g-plugin-rough-canvas-renderer/package.json b/packages/g-plugin-rough-canvas-renderer/package.json
index b675019de..8060bb9e3 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": "1.9.22",
+  "version": "1.9.23",
   "description": "A G plugin of renderer implementation with rough.js",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-rough-svg-renderer/CHANGELOG.md b/packages/g-plugin-rough-svg-renderer/CHANGELOG.md
index cd9637f2e..d5d8fdf85 100644
--- a/packages/g-plugin-rough-svg-renderer/CHANGELOG.md
+++ b/packages/g-plugin-rough-svg-renderer/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-rough-svg-renderer
 
+## 1.9.23
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-svg@1.10.22
+
 ## 1.9.22
 
 ### Patch Changes
diff --git a/packages/g-plugin-rough-svg-renderer/package.json b/packages/g-plugin-rough-svg-renderer/package.json
index 3d929014c..b9beba849 100644
--- a/packages/g-plugin-rough-svg-renderer/package.json
+++ b/packages/g-plugin-rough-svg-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-rough-svg-renderer",
-  "version": "1.9.22",
+  "version": "1.9.23",
   "description": "A G plugin of renderer implementation with rough.js",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-svg-picker/CHANGELOG.md b/packages/g-plugin-svg-picker/CHANGELOG.md
index 4f2659ed2..b9bcfe769 100644
--- a/packages/g-plugin-svg-picker/CHANGELOG.md
+++ b/packages/g-plugin-svg-picker/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-svg-picker
 
+## 1.9.22
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-svg-renderer@1.10.22
+
 ## 1.9.21
 
 ### Patch Changes
diff --git a/packages/g-plugin-svg-picker/package.json b/packages/g-plugin-svg-picker/package.json
index 01e1b02a6..2c4676ce9 100644
--- a/packages/g-plugin-svg-picker/package.json
+++ b/packages/g-plugin-svg-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-svg-picker",
-  "version": "1.9.21",
+  "version": "1.9.22",
   "description": "A G plugin for picking in SVG",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-svg-renderer/CHANGELOG.md b/packages/g-plugin-svg-renderer/CHANGELOG.md
index 8420e1de6..54efd0931 100644
--- a/packages/g-plugin-svg-renderer/CHANGELOG.md
+++ b/packages/g-plugin-svg-renderer/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-svg-renderer
 
+## 1.10.22
+
+### Patch Changes
+
+-   4fdee19f: Avoid generating redundant dom structure for document element.
+-   4fdee19f: Fix picking error when isBillboard enabled.
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.10.21
 
 ### Patch Changes
diff --git a/packages/g-plugin-svg-renderer/package.json b/packages/g-plugin-svg-renderer/package.json
index 4465a8555..ca36a281b 100644
--- a/packages/g-plugin-svg-renderer/package.json
+++ b/packages/g-plugin-svg-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-svg-renderer",
-  "version": "1.10.21",
+  "version": "1.10.22",
   "description": "A G plugin of renderer implementation with SVG",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-yoga/CHANGELOG.md b/packages/g-plugin-yoga/CHANGELOG.md
index 40d1c972d..32833dba4 100644
--- a/packages/g-plugin-yoga/CHANGELOG.md
+++ b/packages/g-plugin-yoga/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-yoga
 
+## 1.9.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.9.17
 
 ### Patch Changes
diff --git a/packages/g-plugin-yoga/package.json b/packages/g-plugin-yoga/package.json
index e225e439e..63b5febe0 100644
--- a/packages/g-plugin-yoga/package.json
+++ b/packages/g-plugin-yoga/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-yoga",
-  "version": "1.9.17",
+  "version": "1.9.18",
   "description": "A G plugin for Yoga layout engine",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md b/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
index 45d33ffff..9781254a5 100644
--- a/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-zdog-canvas-renderer
 
+## 1.2.23
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-canvas@1.11.23
+
 ## 1.2.22
 
 ### Patch Changes
diff --git a/packages/g-plugin-zdog-canvas-renderer/package.json b/packages/g-plugin-zdog-canvas-renderer/package.json
index 09b060e32..f28970416 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": "1.2.22",
+  "version": "1.2.23",
   "description": "A G plugin of renderer implementation with Zdog",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md b/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md
index fe54e6aa0..7d3b12087 100644
--- a/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md
+++ b/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @antv/g-plugin-zdog-svg-renderer
 
+## 1.2.23
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-svg-renderer@1.10.22
+    -   @antv/g-svg@1.10.22
+
 ## 1.2.22
 
 ### Patch Changes
diff --git a/packages/g-plugin-zdog-svg-renderer/package.json b/packages/g-plugin-zdog-svg-renderer/package.json
index fb28a58d7..171c031cb 100644
--- a/packages/g-plugin-zdog-svg-renderer/package.json
+++ b/packages/g-plugin-zdog-svg-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-zdog-svg-renderer",
-  "version": "1.2.22",
+  "version": "1.2.23",
   "description": "A G plugin of renderer implementation with Zdog",
   "keywords": [
     "antv",
diff --git a/packages/g-svg/CHANGELOG.md b/packages/g-svg/CHANGELOG.md
index 2d42ef348..e94ccdae3 100644
--- a/packages/g-svg/CHANGELOG.md
+++ b/packages/g-svg/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @antv/g-svg
 
+## 1.10.22
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-svg-renderer@1.10.22
+    -   @antv/g-plugin-dom-interaction@1.9.18
+    -   @antv/g-plugin-svg-picker@1.9.22
+
 ## 1.10.21
 
 ### Patch Changes
diff --git a/packages/g-svg/package.json b/packages/g-svg/package.json
index 2dd3f89fd..3aaa7cefb 100644
--- a/packages/g-svg/package.json
+++ b/packages/g-svg/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-svg",
-  "version": "1.10.21",
+  "version": "1.10.22",
   "description": "A renderer implemented by SVG",
   "keywords": [
     "antv",
diff --git a/packages/g-web-animations-api/CHANGELOG.md b/packages/g-web-animations-api/CHANGELOG.md
index 9ee9584e0..0a856fe70 100644
--- a/packages/g-web-animations-api/CHANGELOG.md
+++ b/packages/g-web-animations-api/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-web-animations-api
 
+## 1.2.18
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+
 ## 1.2.17
 
 ### Patch Changes
diff --git a/packages/g-web-animations-api/package.json b/packages/g-web-animations-api/package.json
index dd360f9e1..de28198d7 100644
--- a/packages/g-web-animations-api/package.json
+++ b/packages/g-web-animations-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-web-animations-api",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "description": "A simple implementation of Web Animations API.",
   "keywords": [
     "antv",
diff --git a/packages/g-web-components/CHANGELOG.md b/packages/g-web-components/CHANGELOG.md
index 61edfca37..59db21443 100644
--- a/packages/g-web-components/CHANGELOG.md
+++ b/packages/g-web-components/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-web-components
 
+## 1.9.31
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-webgl@1.9.30
+    -   @antv/g-canvas@1.11.23
+
 ## 1.9.30
 
 ### Patch Changes
diff --git a/packages/g-web-components/package.json b/packages/g-web-components/package.json
index da62010c9..6db0a5565 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": "1.9.30",
+  "version": "1.9.31",
   "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 18f20417f..35ad48281 100644
--- a/packages/g-webgl/CHANGELOG.md
+++ b/packages/g-webgl/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @antv/g-webgl
 
+## 1.9.30
+
+### Patch Changes
+
+-   4fdee19f: Fix picking error when isBillboard enabled.
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-device-renderer@1.9.27
+    -   @antv/g-plugin-dom-interaction@1.9.18
+    -   @antv/g-plugin-html-renderer@1.9.21
+
 ## 1.9.29
 
 ### Patch Changes
diff --git a/packages/g-webgl/package.json b/packages/g-webgl/package.json
index 55a215698..0643356fa 100644
--- a/packages/g-webgl/package.json
+++ b/packages/g-webgl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-webgl",
-  "version": "1.9.29",
+  "version": "1.9.30",
   "description": "A renderer implemented by WebGL1/2",
   "keywords": [
     "antv",
@@ -44,7 +44,7 @@
     "@antv/g-plugin-html-renderer": "workspace:*",
     "@antv/g-plugin-image-loader": "workspace:*",
     "@antv/util": "^3.3.4",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "tslib": "^2.5.3"
   },
   "devDependencies": {
diff --git a/packages/g-webgpu/CHANGELOG.md b/packages/g-webgpu/CHANGELOG.md
index 98c9f605b..f77d61e4b 100644
--- a/packages/g-webgpu/CHANGELOG.md
+++ b/packages/g-webgpu/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @antv/g-webgpu
 
+## 1.9.30
+
+### Patch Changes
+
+-   4fdee19f: Fix picking error when isBillboard enabled.
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-plugin-image-loader@1.3.18
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-plugin-device-renderer@1.9.27
+    -   @antv/g-plugin-dom-interaction@1.9.18
+    -   @antv/g-plugin-html-renderer@1.9.21
+
 ## 1.9.29
 
 ### Patch Changes
diff --git a/packages/g-webgpu/package.json b/packages/g-webgpu/package.json
index f1d232029..a68ea6225 100644
--- a/packages/g-webgpu/package.json
+++ b/packages/g-webgpu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-webgpu",
-  "version": "1.9.29",
+  "version": "1.9.30",
   "description": "A renderer implemented by WebGPU",
   "keywords": [
     "antv",
@@ -43,7 +43,7 @@
     "@antv/g-plugin-dom-interaction": "workspace:*",
     "@antv/g-plugin-html-renderer": "workspace:*",
     "@antv/g-plugin-image-loader": "workspace:*",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "@antv/util": "^3.3.4",
     "@webgpu/types": "^0.1.6",
     "tslib": "^2.5.3"
diff --git a/packages/g/CHANGELOG.md b/packages/g/CHANGELOG.md
index 7839be69e..9adac4dd0 100644
--- a/packages/g/CHANGELOG.md
+++ b/packages/g/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @antv/g
 
+## 5.18.20
+
+### Patch Changes
+
+-   Updated dependencies [4fdee19f]
+-   Updated dependencies [4fdee19f]
+    -   @antv/g-lite@1.2.18
+    -   @antv/g-camera-api@1.2.19
+    -   @antv/g-dom-mutation-observer-api@1.2.18
+    -   @antv/g-web-animations-api@1.2.18
+
 ## 5.18.19
 
 ### Patch Changes
diff --git a/packages/g/package.json b/packages/g/package.json
index ff2db4e28..581d480e8 100644
--- a/packages/g/package.json
+++ b/packages/g/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g",
-  "version": "5.18.19",
+  "version": "5.18.20",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",
diff --git a/packages/react-g/CHANGELOG.md b/packages/react-g/CHANGELOG.md
index f57a6e71a..0128f5016 100644
--- a/packages/react-g/CHANGELOG.md
+++ b/packages/react-g/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/react-g
 
+## 1.10.21
+
+### Patch Changes
+
+-   @antv/g@5.18.20
+
 ## 1.10.20
 
 ### Patch Changes
diff --git a/packages/react-g/package.json b/packages/react-g/package.json
index 28f86ddbd..38f2359a4 100644
--- a/packages/react-g/package.json
+++ b/packages/react-g/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/react-g",
-  "version": "1.10.20",
+  "version": "1.10.21",
   "description": "react render for @antv/g",
   "keywords": [
     "react",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72294344a..bd5acd710 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -450,8 +450,8 @@ importers:
   packages/g-mobile-webgl:
     dependencies:
       '@antv/g-device-api':
-        specifier: ^1.3.0
-        version: 1.3.0
+        specifier: ^1.3.6
+        version: 1.3.6
       '@antv/g-lite':
         specifier: workspace:*
         version: link:../g-lite
@@ -502,8 +502,8 @@ importers:
   packages/g-plugin-3d:
     dependencies:
       '@antv/g-device-api':
-        specifier: ^1.3.0
-        version: 1.3.0
+        specifier: ^1.3.6
+        version: 1.3.6
       '@antv/g-lite':
         specifier: workspace:*
         version: link:../g-lite
@@ -688,8 +688,8 @@ importers:
   packages/g-plugin-device-renderer:
     dependencies:
       '@antv/g-device-api':
-        specifier: ^1.3.0
-        version: 1.3.0
+        specifier: ^1.3.6
+        version: 1.3.6
       '@antv/g-lite':
         specifier: workspace:*
         version: link:../g-lite
@@ -1027,8 +1027,8 @@ importers:
   packages/g-webgl:
     dependencies:
       '@antv/g-device-api':
-        specifier: ^1.3.0
-        version: 1.3.0
+        specifier: ^1.3.6
+        version: 1.3.6
       '@antv/g-lite':
         specifier: workspace:*
         version: link:../g-lite
@@ -1061,8 +1061,8 @@ importers:
   packages/g-webgpu:
     dependencies:
       '@antv/g-device-api':
-        specifier: ^1.3.0
-        version: 1.3.0
+        specifier: ^1.3.6
+        version: 1.3.6
       '@antv/g-lite':
         specifier: workspace:*
         version: link:../g-lite
@@ -1138,8 +1138,8 @@ importers:
         specifier: ^1.9.1
         version: link:../packages/g-components
       '@antv/g-device-api':
-        specifier: ^1.3.0
-        version: 1.3.0
+        specifier: ^1.3.6
+        version: 1.3.6
       '@antv/g-lite':
         specifier: ^1.2.12
         version: link:../packages/g-lite
@@ -1608,8 +1608,8 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@antv/g-device-api@1.3.0:
-    resolution: {integrity: sha512-zBDLuxEV1LuEAFnAQOGfFwawuXQh6FzcoFCq+V+W3/vPS5Vm/N52AxjQ2ZmqI0Vqh3MtYHz+jM+Yv4ouZMTcHA==}
+  /@antv/g-device-api@1.3.6:
+    resolution: {integrity: sha512-x1h2vPKZxQZwDi6RYfFyvvGcK9iLq6qNccsgBhVp7+tUrMumL8CntoASzSQCnj6CqzDuxz1dzSXrTq/PXMFprA==}
     dependencies:
       '@antv/util': 3.3.4
       '@webgpu/types': 0.1.34
diff --git a/site/docs/api/basic/image.en.md b/site/docs/api/basic/image.en.md
index 664a93857..6421859a2 100644
--- a/site/docs/api/basic/image.en.md
+++ b/site/docs/api/basic/image.en.md
@@ -117,6 +117,20 @@ Image height.
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | '0'                                                                  | -                   | no                                     | yes        | [\<percentage\>](/en/api/css/css-properties-values-api#percentage) [\<length\>](/en/api/css/css-properties-values-api#length) |
 
+### keepAspectRatio
+
+Whether to keep aspect ratio, when enabled we can only provide height or width, the missing item will be calculated according to raw ratio. [Example](/en/examples/shape/image#image-keep-aspect-ratio)
+
+```ts
+const image = new Image({
+    style: {
+        width: 200,
+        keepAspectRatio: true,
+        src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    },
+});
+```
+
 ### isBillboard
 
 Whether or not to always face the camera in 3D scenes, defaults to `false`, also known as the "billboard effect".
diff --git a/site/docs/api/basic/image.zh.md b/site/docs/api/basic/image.zh.md
index 34a6e059b..eb01c495f 100644
--- a/site/docs/api/basic/image.zh.md
+++ b/site/docs/api/basic/image.zh.md
@@ -118,6 +118,20 @@ img.onload = () => {
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
 | '0'                                                           | -        | 否                                    | 是           | [\<percentage\>](/zh/api/css/css-properties-values-api#percentage) [\<length\>](/zh/api/css/css-properties-values-api#length) |
 
+### keepAspectRatio
+
+保持宽高比。开启后，只需要传入宽高任意一项，加载完成后根据原始图片的宽高比计算缺失项。[示例](/zh/examples/shape/image#image-keep-aspect-ratio)
+
+```ts
+const image = new Image({
+    style: {
+        width: 200,
+        keepAspectRatio: true,
+        src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    },
+});
+```
+
 ### isBillboard
 
 在 3D 场景下是否永远面朝相机，默认为 `false`，也称作“公告牌效果”。
diff --git a/site/docs/api/basic/path.en.md b/site/docs/api/basic/path.en.md
index 41ae80f30..c96a07c61 100644
--- a/site/docs/api/basic/path.en.md
+++ b/site/docs/api/basic/path.en.md
@@ -63,6 +63,14 @@ Default value is `'1'`. See [DisplayObject's lineWidth](/en/api/basic/display-ob
 
 Default value is `'4'`. See [DisplayObject's miterLimit](/en/api/basic/display-object#miterLimit)
 
+### isBillboard
+
+Effective in 3D scenes, always facing the screen, so the line width is not affected by the perspective projection image. The default value is `false`.
+
+### isSizeAttenuation
+
+When isBillboard is enabled, whether or not to apply size attenuation in perspective projection. This option can be turned on if you want to keep the size consistent regardless of depth, following the "near big, far small" visual effect in perspective projection.
+
 ## Additional Properties
 
 ### path
diff --git a/site/docs/api/basic/path.zh.md b/site/docs/api/basic/path.zh.md
index 1a067a649..97e2fa813 100644
--- a/site/docs/api/basic/path.zh.md
+++ b/site/docs/api/basic/path.zh.md
@@ -177,6 +177,14 @@ path.style.markerMid = circleMarker;
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | -------------------------------------------------------------- |
 | '0'                                                           | -        | 否                                    | 是           | [\<length\>](/zh/api/css/css-properties-values-api#length)     |
 
+### isBillboard
+
+3D 场景中生效，始终朝向屏幕，因此线宽不受透视投影影像。默认值为 `false`。
+
+### isSizeAttenuation
+
+开启 isBillboard 后，在透视投影下，是否进行尺寸衰减。在透视投影中遵循“近大远小”的视觉效果，如果希望保持大小始终一致不受深度影响，可以开启该选项。
+
 ## 方法
 
 ### getTotalLength
diff --git a/site/docs/api/basic/polyline.en.md b/site/docs/api/basic/polyline.en.md
index 6465b13f7..51c9707a0 100644
--- a/site/docs/api/basic/polyline.en.md
+++ b/site/docs/api/basic/polyline.en.md
@@ -239,7 +239,6 @@ const polyline = new Polyline({
         lineWidth: 10,
         lineCap: 'round',
         lineJoin: 'round',
-        isBillboard: true,
         points: [
             [50, 50, 0],
             [100, 50, 100],
@@ -254,6 +253,6 @@ const polyline = new Polyline({
 });
 ```
 
-[Example](/en/examples/3d/3d-basic/#billboard):
-
 ![3D polyline](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-ZNXQIWU2SkAAAAAAAAAAAAADmJ7AQ/original)
+
+[Example](/en/examples/3d/3d-basic/#billboard)
diff --git a/site/docs/api/basic/polyline.zh.md b/site/docs/api/basic/polyline.zh.md
index c7977ed3d..4b6445d0f 100644
--- a/site/docs/api/basic/polyline.zh.md
+++ b/site/docs/api/basic/polyline.zh.md
@@ -230,7 +230,7 @@ polyline.getPointAtLength(100); // Point {x: 300, y: 100}
 
 ## 3D Polyline
 
-和 Line 一样，折线也可以定义在三维空间，配合公告牌效果：
+和 Line 一样，折线也可以定义在三维空间：
 
 ```js
 const polyline = new Polyline({
@@ -239,7 +239,6 @@ const polyline = new Polyline({
         lineWidth: 10,
         lineCap: 'round',
         lineJoin: 'round',
-        isBillboard: true,
         points: [
             [50, 50, 0],
             [100, 50, 100],
@@ -254,6 +253,8 @@ const polyline = new Polyline({
 });
 ```
 
-[示例](/zh/examples/3d/3d-basic/#billboard)效果如下：
+效果如下：
 
 ![3D polyline](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-ZNXQIWU2SkAAAAAAAAAAAAADmJ7AQ/original)
+
+但如果应用了公告牌效果，3D 效果将消失[示例](/zh/examples/3d/3d-basic/#billboard)。
diff --git a/site/examples/3d/3d-basic/demo/billboard.js b/site/examples/3d/3d-basic/demo/billboard.js
index e7d832bbe..c6502aa84 100644
--- a/site/examples/3d/3d-basic/demo/billboard.js
+++ b/site/examples/3d/3d-basic/demo/billboard.js
@@ -95,7 +95,7 @@ const canvas = new Canvas({
       z2: 0,
       stroke: 'black',
       lineWidth: 2,
-      isBillboard: true,
+      isSizeAttenuation: true,
     },
   });
   canvas.appendChild(xAxis);
@@ -108,7 +108,7 @@ const canvas = new Canvas({
       ],
       stroke: 'black',
       lineWidth: 2,
-      isBillboard: true,
+      isSizeAttenuation: true,
     },
   });
   canvas.appendChild(yAxis);
@@ -123,18 +123,17 @@ const canvas = new Canvas({
       z2: 100,
       stroke: 'black',
       lineWidth: 2,
-      isBillboard: true,
+      isSizeAttenuation: true,
     },
   });
   canvas.appendChild(zAxis);
 
-  const polyline = new Polyline({
+  const polyline3D = new Polyline({
     style: {
       stroke: '#1890FF',
       lineWidth: 10,
       lineCap: 'round',
       lineJoin: 'round',
-      isBillboard: true,
       points: [
         [50, 50, 0],
         [100, 50, 100],
@@ -145,10 +144,63 @@ const canvas = new Canvas({
         [200, 200, 0],
         [250, 200, 0],
       ],
+      cursor: 'pointer',
+      isBillboard: true,
+    },
+  });
+  polyline3D.translate(0, 200);
+  canvas.appendChild(polyline3D);
+
+  const circle = new Circle({
+    style: {
+      cx: 200,
+      cy: 200,
+      r: 50,
+      fill: 'red',
+      isBillboard: true,
+      cursor: 'pointer',
+    },
+  });
+  canvas.appendChild(circle);
+
+  const rect = new Rect({
+    style: {
+      x: 100,
+      y: 100,
+      width: 10,
+      height: 10,
+      fill: 'red',
+      isBillboard: true,
+      cursor: 'pointer',
+    },
+  });
+  canvas.appendChild(rect);
+
+  const path = new Path({
+    style: {
+      path: [
+        ['M', 57.06339097770921, -18.541019662496844],
+        ['L', 13.225168176580645, -18.202882373436317],
+        ['L', 3.67394039744206e-15, -60],
+        ['L', -13.225168176580643, -18.202882373436317],
+        ['L', -57.06339097770921, -18.54101966249685],
+        ['L', -21.398771616640953, 6.952882373436324],
+        ['L', -35.267115137548394, 48.54101966249684],
+        ['L', -4.133182947122317e-15, 22.5],
+        ['L', 35.26711513754837, 48.54101966249685],
+        ['L', 21.398771616640953, 6.952882373436322],
+        ['Z'],
+      ],
+      stroke: '#1890FF',
+      lineWidth: 10,
+      lineCap: 'round',
+      lineJoin: 'round',
+      isBillboard: true,
+      cursor: 'pointer',
     },
   });
-  polyline.translate(0, 200);
-  canvas.appendChild(polyline);
+  path.translate(100, 100, 0);
+  canvas.appendChild(path);
 
   // add a directional light into scene
   const light = new DirectionalLight({
diff --git a/site/examples/3d/3d-basic/demo/size-attenuation.js b/site/examples/3d/3d-basic/demo/size-attenuation.js
index 407bf4d78..bbb3b191e 100644
--- a/site/examples/3d/3d-basic/demo/size-attenuation.js
+++ b/site/examples/3d/3d-basic/demo/size-attenuation.js
@@ -5,6 +5,8 @@ import {
   Line,
   Text,
   Rect,
+  Polyline,
+  Path,
   Image,
   CameraType,
 } from '@antv/g';
@@ -45,6 +47,7 @@ const canvas = new Canvas({
       height: 20,
       src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
       isBillboard: true,
+      isSizeAttenuation: true,
     },
   });
   const label = new Text({
@@ -93,6 +96,7 @@ const canvas = new Canvas({
       stroke: 'black',
       lineWidth: 2,
       isBillboard: true,
+      isSizeAttenuation: true,
     },
   });
   canvas.appendChild(xAxis);
@@ -108,6 +112,7 @@ const canvas = new Canvas({
       stroke: 'black',
       lineWidth: 2,
       isBillboard: true,
+      isSizeAttenuation: true,
     },
   });
   canvas.appendChild(yAxis);
@@ -123,10 +128,86 @@ const canvas = new Canvas({
       stroke: 'black',
       lineWidth: 2,
       isBillboard: true,
+      isSizeAttenuation: true,
     },
   });
   canvas.appendChild(zAxis);
 
+  const path = new Path({
+    style: {
+      path: [
+        ['M', 57.06339097770921, -18.541019662496844],
+        ['L', 13.225168176580645, -18.202882373436317],
+        ['L', 3.67394039744206e-15, -60],
+        ['L', -13.225168176580643, -18.202882373436317],
+        ['L', -57.06339097770921, -18.54101966249685],
+        ['L', -21.398771616640953, 6.952882373436324],
+        ['L', -35.267115137548394, 48.54101966249684],
+        ['L', -4.133182947122317e-15, 22.5],
+        ['L', 35.26711513754837, 48.54101966249685],
+        ['L', 21.398771616640953, 6.952882373436322],
+        ['Z'],
+      ],
+      stroke: '#1890FF',
+      lineWidth: 10,
+      lineCap: 'round',
+      lineJoin: 'round',
+      isBillboard: true,
+      isSizeAttenuation: true,
+      cursor: 'pointer',
+    },
+  });
+  path.translate(100, 100, 0);
+  canvas.appendChild(path);
+
+  const polyline3D = new Polyline({
+    style: {
+      stroke: '#1890FF',
+      lineWidth: 10,
+      lineCap: 'round',
+      lineJoin: 'round',
+      points: [
+        [50, 50, 0],
+        [100, 50, 100],
+        [100, 100, 0],
+        [150, 100, 100],
+        [150, 150, 0],
+        [200, 150, 0],
+        [200, 200, 0],
+        [250, 200, 0],
+      ],
+      cursor: 'pointer',
+      isBillboard: true,
+      isSizeAttenuation: true,
+    },
+  });
+  polyline3D.translate(0, 200);
+  canvas.appendChild(polyline3D);
+
+  const polyline2D = new Polyline({
+    style: {
+      stroke: '#1890FF',
+      lineWidth: 10,
+      lineCap: 'round',
+      lineJoin: 'round',
+      points: [
+        [50, 50],
+        [100, 50],
+        [100, 100],
+        [150, 100],
+        [150, 150],
+        [200, 150],
+        [200, 200],
+        [250, 200],
+      ],
+      cursor: 'pointer',
+      isBillboard: true,
+      isSizeAttenuation: true,
+    },
+  });
+  polyline2D.translate(200, 200);
+  canvas.appendChild(polyline2D);
+
   // add a directional light into scene
   const light = new DirectionalLight({
     style: {
@@ -159,21 +240,90 @@ const canvas = new Canvas({
   // GUI
   const gui = new lil.GUI({ autoPlace: false });
   $wrapper.appendChild(gui.domElement);
-  const folder = gui.addFolder('size attenuation');
-  const config = {
-    textSizeAttenuation: true,
-    imageSizeAttenuation: false,
+  const textFolder = gui.addFolder('text');
+  const textConfig = {
+    isBillboard: true,
+    isSizeAttenuation: true,
   };
-  folder.add(config, 'textSizeAttenuation').onChange((textSizeAttenuation) => {
+  const imageFolder = gui.addFolder('image');
+  const imageConfig = {
+    isBillboard: true,
+    isSizeAttenuation: true,
+  };
+  const pathFolder = gui.addFolder('path');
+  const pathConfig = {
+    isBillboard: true,
+    isSizeAttenuation: true,
+  };
+  const polyline2DFolder = gui.addFolder('polyline2D');
+  const polyline2DConfig = {
+    isBillboard: true,
+    isSizeAttenuation: true,
+  };
+  const polyline3DFolder = gui.addFolder('polyline3D');
+  const polyline3DConfig = {
+    isBillboard: true,
+    isSizeAttenuation: true,
+  };
+
+  textFolder.add(textConfig, 'isBillboard').onChange((isBillboard) => {
     canvas.document.querySelectorAll('text').forEach((text) => {
-      text.style.isSizeAttenuation = textSizeAttenuation;
+      text.style.isBillboard = isBillboard;
     });
   });
-  folder
-    .add(config, 'imageSizeAttenuation')
-    .onChange((imageSizeAttenuation) => {
+  textFolder
+    .add(textConfig, 'isSizeAttenuation')
+    .onChange((isSizeAttenuation) => {
+      canvas.document.querySelectorAll('text').forEach((text) => {
+        text.style.isSizeAttenuation = isSizeAttenuation;
+      });
+    });
+
+  imageFolder.add(imageConfig, 'isBillboard').onChange((isBillboard) => {
+    canvas.document.querySelectorAll('image').forEach((image) => {
+      image.style.isBillboard = isBillboard;
+    });
+  });
+  imageFolder
+    .add(imageConfig, 'isSizeAttenuation')
+    .onChange((isSizeAttenuation) => {
       canvas.document.querySelectorAll('image').forEach((image) => {
-        image.style.isSizeAttenuation = imageSizeAttenuation;
+        image.style.isSizeAttenuation = isSizeAttenuation;
       });
     });
+
+  pathFolder.add(pathConfig, 'isBillboard').onChange((isBillboard) => {
+    canvas.document.querySelectorAll('path').forEach((path) => {
+      path.style.isBillboard = isBillboard;
+    });
+  });
+  pathFolder
+    .add(pathConfig, 'isSizeAttenuation')
+    .onChange((isSizeAttenuation) => {
+      canvas.document.querySelectorAll('path').forEach((path) => {
+        path.style.isSizeAttenuation = isSizeAttenuation;
+      });
+    });
+
+  polyline2DFolder
+    .add(polyline2DConfig, 'isBillboard')
+    .onChange((isBillboard) => {
+      polyline2D.style.isBillboard = isBillboard;
+    });
+  polyline2DFolder
+    .add(polyline2DConfig, 'isSizeAttenuation')
+    .onChange((isSizeAttenuation) => {
+      polyline2D.style.isSizeAttenuation = isSizeAttenuation;
+    });
+
+  polyline3DFolder
+    .add(polyline3DConfig, 'isBillboard')
+    .onChange((isBillboard) => {
+      polyline3D.style.isBillboard = isBillboard;
+    });
+  polyline3DFolder
+    .add(polyline3DConfig, 'isSizeAttenuation')
+    .onChange((isSizeAttenuation) => {
+      polyline3D.style.isSizeAttenuation = isSizeAttenuation;
+    });
 })();
diff --git a/site/examples/plugins/zdog/demo/meta.json b/site/examples/plugins/zdog/demo/meta.json
index 85dbbc797..2dcc4ceaa 100644
--- a/site/examples/plugins/zdog/demo/meta.json
+++ b/site/examples/plugins/zdog/demo/meta.json
@@ -5,7 +5,7 @@
   },
   "demos": [
     {
-      "filename": "Zdog.js",
+      "filename": "zdog.js",
       "title": {
         "zh": "使用 Zdog 渲染",
         "en": "Use Zdog"
diff --git a/site/examples/shape/image/demo/image-keep-aspect-ratio.js b/site/examples/shape/image/demo/image-keep-aspect-ratio.js
new file mode 100644
index 000000000..93b896ac8
--- /dev/null
+++ b/site/examples/shape/image/demo/image-keep-aspect-ratio.js
@@ -0,0 +1,234 @@
+import { Canvas, CanvasEvent, Image } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Renderer as CanvaskitRenderer } from '@antv/g-canvaskit';
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Renderer as WebGPURenderer } from '@antv/g-webgpu';
+import * as lil from 'lil-gui';
+import Stats from 'stats.js';
+
+// create a renderer
+const canvasRenderer = new CanvasRenderer();
+const webglRenderer = new WebGLRenderer();
+const svgRenderer = new SVGRenderer();
+const canvaskitRenderer = new CanvaskitRenderer({
+  wasmDir: '/',
+  fonts: [
+    {
+      name: 'Roboto',
+      url: '/Roboto-Regular.ttf',
+    },
+    {
+      name: 'sans-serif',
+      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf',
+    },
+  ],
+});
+const webgpuRenderer = new WebGPURenderer({
+  shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
+});
+
+// create a canvas
+const canvas = new Canvas({
+  container: 'container',
+  width: 600,
+  height: 500,
+  renderer: canvasRenderer,
+});
+
+const image = new Image({
+  style: {
+    x: 200,
+    y: 100,
+    width: 200,
+    keepAspectRatio: true,
+    img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    cursor: 'pointer',
+    pointerEvents: 'pixels',
+  },
+});
+
+canvas.addEventListener(CanvasEvent.READY, () => {
+  canvas.appendChild(image);
+});
+
+// stats
+const stats = new Stats();
+stats.showPanel(0);
+const $stats = stats.dom;
+$stats.style.position = 'absolute';
+$stats.style.left = '0px';
+$stats.style.top = '0px';
+const $wrapper = document.getElementById('container');
+$wrapper.appendChild($stats);
+canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
+  if (stats) {
+    stats.update();
+  }
+});
+
+// GUI
+const gui = new lil.GUI({ autoPlace: false });
+$wrapper.appendChild(gui.domElement);
+const rendererFolder = gui.addFolder('renderer');
+const rendererConfig = {
+  renderer: 'canvas',
+};
+rendererFolder
+  .add(rendererConfig, 'renderer', [
+    'canvas',
+    'svg',
+    'webgl',
+    'webgpu',
+    'canvaskit',
+  ])
+  .onChange((rendererName) => {
+    let renderer;
+    if (rendererName === 'canvas') {
+      renderer = canvasRenderer;
+    } else if (rendererName === 'svg') {
+      renderer = svgRenderer;
+    } else if (rendererName === 'webgl') {
+      renderer = webglRenderer;
+    } else if (rendererName === 'webgpu') {
+      renderer = webgpuRenderer;
+    } else if (rendererName === 'canvaskit') {
+      renderer = canvaskitRenderer;
+    }
+    canvas.setRenderer(renderer);
+  });
+rendererFolder.open();
+
+const imageFolder = gui.addFolder('image');
+const config = {
+  x: 200,
+  y: 100,
+  width: 200,
+  height: 200,
+  opacity: 1,
+  src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+  pointerEvents: 'auto',
+  visibility: 'visible',
+};
+imageFolder.add(config, 'x', 0, 400).onChange((x) => {
+  image.style.x = x;
+});
+imageFolder.add(config, 'y', 0, 400).onChange((y) => {
+  image.style.y = y;
+});
+imageFolder.add(config, 'width', 0, 400).onChange((width) => {
+  image.style.width = width;
+});
+imageFolder.add(config, 'height', 0, 400).onChange((height) => {
+  image.style.height = height;
+});
+imageFolder.add(config, 'opacity', 0, 1, 0.1).onChange((opacity) => {
+  image.style.opacity = opacity;
+});
+imageFolder
+  .add(config, 'src', [
+    'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*8eoKRbfOwgAAAAAAAAAAAABkARQnAQ',
+  ])
+  .onChange((src) => {
+    image.style.img = src;
+  });
+imageFolder
+  .add(config, 'pointerEvents', [
+    'none',
+    'auto',
+    'stroke',
+    'fill',
+    'painted',
+    'visible',
+    'visiblestroke',
+    'visiblefill',
+    'visiblepainted',
+    'all',
+  ])
+  .onChange((pointerEvents) => {
+    image.style.pointerEvents = pointerEvents;
+  });
+imageFolder
+  .add(config, 'visibility', ['visible', 'hidden'])
+  .onChange((visibility) => {
+    image.style.visibility = visibility;
+  });
+imageFolder.open();
+
+const transformFolder = gui.addFolder('transform');
+const transformConfig = {
+  localPositionX: 200,
+  localPositionY: 100,
+  localScaleX: 1,
+  localScaleY: 1,
+  localEulerAngles: 0,
+  skewX: 0,
+  skewY: 0,
+  transformOrigin: 'left top',
+  anchorX: 0,
+  anchorY: 0,
+};
+transformFolder
+  .add(transformConfig, 'transformOrigin', [
+    'left top',
+    'center',
+    'right bottom',
+    '50% 50%',
+    '50px 50px',
+  ])
+  .onChange((transformOrigin) => {
+    image.style.transformOrigin = transformOrigin;
+  });
+transformFolder
+  .add(transformConfig, 'localPositionX', 0, 600)
+  .onChange((localPositionX) => {
+    const [lx, ly] = image.getLocalPosition();
+    image.setLocalPosition(localPositionX, ly);
+  });
+transformFolder
+  .add(transformConfig, 'localPositionY', 0, 500)
+  .onChange((localPositionY) => {
+    const [lx, ly] = image.getLocalPosition();
+    image.setLocalPosition(lx, localPositionY);
+  });
+transformFolder
+  .add(transformConfig, 'localScaleX', -5, 5)
+  .onChange((localScaleX) => {
+    if (localScaleX === 0) {
+      localScaleX = 0.0001;
+    }
+    image.setLocalScale(localScaleX, transformConfig.localScaleY);
+  });
+transformFolder
+  .add(transformConfig, 'localScaleY', -5, 5)
+  .onChange((localScaleY) => {
+    if (localScaleY === 0) {
+      localScaleY = 0.0001;
+    }
+    image.setLocalScale(transformConfig.localScaleX, localScaleY);
+  });
+transformFolder
+  .add(transformConfig, 'localEulerAngles', 0, 360)
+  .onChange((localEulerAngles) => {
+    image.setLocalEulerAngles(localEulerAngles);
+  });
+transformFolder.add(transformConfig, 'skewX', -180, 180).onChange((skewX) => {
+  image.setLocalSkew(
+    skewX * (Math.PI / 180),
+    transformConfig.skewY * (Math.PI / 180),
+  );
+});
+transformFolder.add(transformConfig, 'skewY', -180, 180).onChange((skewY) => {
+  image.setLocalSkew(
+    transformConfig.skewX * (Math.PI / 180),
+    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/meta.json b/site/examples/shape/image/demo/meta.json
index 2d8ce88ba..ae3fb3d9a 100644
--- a/site/examples/shape/image/demo/meta.json
+++ b/site/examples/shape/image/demo/meta.json
@@ -11,6 +11,14 @@
         "en": "Image"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*OIAmRpwhNWYAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "image-keep-aspect-ratio.js",
+      "title": {
+        "zh": "使用保持宽高比",
+        "en": "Keep aspect ratio"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*OIAmRpwhNWYAAAAAAAAAAABkARQnAQ"
     }
   ]
 }
diff --git a/site/package.json b/site/package.json
index a73e374d2..7dcad4483 100644
--- a/site/package.json
+++ b/site/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@antv/g-components": "^1.9.1",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "@antv/g-lite": "^1.2.12",
     "@antv/g-mobile-webgl": "^0.9.1",
     "@antv/g-plugin-a11y": "^0.6.7",