diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-bagua.md b/docs/assets/examples/en/pictogram-chart/pictogram-bagua.md
index 96d440a7cc..83c3b4e315 100644
--- a/docs/assets/examples/en/pictogram-chart/pictogram-bagua.md
+++ b/docs/assets/examples/en/pictogram-chart/pictogram-bagua.md
@@ -10,7 +10,7 @@ option: pictogramChart
 
 # SVG Taiji Bagua Symbol Diagram
 
-Contributed by [xilzy](https://github.com/xilzy)
+> Contributed by [xilzy](https://github.com/xilzy)
 
 The Taiji Bagua Symbol Diagram illustrates the elements of the Early Heaven Bagua (Xiantian Bagua). At its core lies the Taiji symbol, surrounded by a middle layer of eight trigram symbols and an outermost layer displaying their corresponding symbolic patterns. Each trigram symbol pattern corresponds to a specific Five Elements attribute. By using the pictographic diagram, viewers can quickly grasp the layout and elemental distribution of the Early Heaven Bagua, offering a valuable reference for its study and analysis. Hovering the mouse over the legend reveals the distribution of a particular elemental attribute, while hovering over the shapes in the diagram displays the name of the element associated with that shape.
 
@@ -112,8 +112,8 @@ const spec = {
       },
       stroke: '#000000', // Border color: Black
       lineWidth: 2,
-      pickable: datum => datum.name !== 'line',
-      visible: datum => datum.id !== 'path-198'
+      pickable: datum => datum.name !== 'Line',
+      visible: datum => datum => !datum.attributes?.d?.startsWith('M0 0L1024 0L1024 1024L0 1024')
     },
     state: {
       active: {
diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-chinamap.md b/docs/assets/examples/en/pictogram-chart/pictogram-chinamap.md
index 2f9f60d6a6..207aa5ed21 100644
--- a/docs/assets/examples/en/pictogram-chart/pictogram-chinamap.md
+++ b/docs/assets/examples/en/pictogram-chart/pictogram-chinamap.md
@@ -1,7 +1,7 @@
 ---
 category: examples
 group: pictogram chart
-title: Map of China eating spicy degree pictograph  
+title: Map of China eating spicy degree pictograph
 keywords: pictogramChart,map,comparison,china
 order: 26-6
 cover: https://cdn.jsdelivr.net/gh/UC-web291/picture_storing/5.gif
@@ -10,11 +10,12 @@ option: pictogramChart
 
 # Chinese Map Pictogram - A Glance at the Spiciness Level in Chinese Provinces
 
-contributed by Qian_Shark
+> Contributed by Qian_Shark
 
 The classification information of different regions in China can be displayed through pictograms, and color mapping can be carried out according to different categories of spicy food, from strong to weak colors, more and more cold tones, while supporting legend hover interactive display of province information.
 
 ## Key Configurations
+
 - In the SVG file, configure the name attribute for the graphic elements. Then, in the chart configuration, you can specify the element styles through the name configuration.
 - Register SVG resources using the VChart.registerSVG interface.
 - Declare the registered SVG name using the svg attribute.
@@ -75,123 +76,123 @@ const chinamap_data = [
   { name: '澳门特别行政区', category: 'bronze', level: '🌶' },
   { name: '台湾省', category: 'bronze', level: '🌶' }
 ];
-      const spec = {
-        // The chart type is pictograph
-        type: 'pictogram',
-        padding: 0,
-        data: {
-          // Unique identifier of the data
-          id: 'data',
-          // Data value
-          values: chinamap_data,
-        },
-        color: {
-          specified: {
-             // master
-            MVP:'rgb(73, 3, 3)',
-            // diamond
-            diamond:'rgb(250, 8, 8)',
-            //  gold
-            gold:'rgb(250, 77, 8)',
-            // silver
-            silver:'rgb(228, 170, 64)',
-            // bronze
-            bronze:'rgb(198, 238, 53)',
-            // The color of undefined categories is white
-            undefined: 'white'
-          },
-          // Series fields are categories
-          field: 'category'
-        },
-        // Series fields are categories
-        seriesField: 'category',
-        //  The name field is the name
-        nameField: 'name',
-        valueField: 'level',
-        // SVG graphic name used
-        svg: 'chinamap',
-        pictogram: {
-          style: {
-            fill: {
-              // Fill color Use color to map the color. The fields are categories
-              scale: 'color',
-              field: 'category'
-            },
-          cursor: 'pointer'
-          },
-          state: {
-            //  The fill color of the legend hover is white
-            legend_hover_reverse: {
-              fill: 'white',
-            },
-            // The effect of making the province map "spit out" when hovering
-            hover: {
-            lineWidth: 3,
-            stroke:'rgb(0, 0, 0)',
-            shadowBlur: 80, 
-            shadowColor: 'rgb(0, 0, 0)', 
-          },
-          hover_reverse:{
-            opacity: 0.1
-          }
-        }
+const spec = {
+  // The chart type is pictograph
+  type: 'pictogram',
+  padding: 0,
+  data: {
+    // Unique identifier of the data
+    id: 'data',
+    // Data value
+    values: chinamap_data
+  },
+  color: {
+    specified: {
+      // master
+      MVP: 'rgb(73, 3, 3)',
+      // diamond
+      diamond: 'rgb(250, 8, 8)',
+      //  gold
+      gold: 'rgb(250, 77, 8)',
+      // silver
+      silver: 'rgb(228, 170, 64)',
+      // bronze
+      bronze: 'rgb(198, 238, 53)',
+      // The color of undefined categories is white
+      undefined: 'white'
+    },
+    // Series fields are categories
+    field: 'category'
+  },
+  // Series fields are categories
+  seriesField: 'category',
+  //  The name field is the name
+  nameField: 'name',
+  valueField: 'level',
+  // SVG graphic name used
+  svg: 'chinamap',
+  pictogram: {
+    style: {
+      fill: {
+        // Fill color Use color to map the color. The fields are categories
+        scale: 'color',
+        field: 'category'
+      },
+      cursor: 'pointer'
+    },
+    state: {
+      //  The fill color of the legend hover is white
+      legend_hover_reverse: {
+        fill: 'white'
+      },
+      // The effect of making the province map "spit out" when hovering
+      hover: {
+        lineWidth: 3,
+        stroke: 'rgb(0, 0, 0)',
+        shadowBlur: 80,
+        shadowColor: 'rgb(0, 0, 0)'
+      },
+      hover_reverse: {
+        opacity: 0.1
+      }
+    }
+  },
+
+  //  Chart title
+  title: {
+    text: 'Spicy food in China at a glance'
+  },
+  legends: [
+    {
+      orient: 'top',
+      position: 'middle',
+      padding: {
+        bottom: 12
       },
-        
-        //  Chart title
-        title: {
-          text: 'Spicy food in China at a glance'
-        },
-        legends: [
-          {
-            orient: 'top',
-            position: 'middle',
-            padding: {
-              bottom: 12
-            },
-            visible: true,
-            field: 'category',
-            filter: false,
-            select: false,
-            data: items => {
-              return items.map(item => {
-                item.shape.outerBorder = {
-                  stroke: item.shape.fill,
-                  distance: 2,
-                  lineWidth: 1
-                };
-                return item;
-              });
-            },
-          }
-        ],
-      };
-
-      // VChart.registerPictogramChart();
-      // VChart.default.registerSVG('chinamap', shape);
-      
-      VChart.registerSVG('chinamap', shape);
-
-      const vchart = new VChart(spec, { dom: CONTAINER_ID  });
-      // Listen for legend item hover events
-      vchart.on('legendItemHover', e => {
-        // Gets the legend item name of the hover
-        const hoveredName = e?.value?.data?.label;
-        if (hoveredName) {
-          // Update the chart status by setting the color of the legend item that is not hovering
-          vchart.updateState({
-            legend_hover_reverse: {
-              filter: d => {
-                // Finds the category of the current data item
-                const category = chinamap_data.find(chinamap_data => chinamap_data.name === d.data?.name)?.category;
-                // Return true if the class exists and is not equal to the legend item name of the hover, fals
-                return category && category!== hoveredName;
-              }
-          }
+      visible: true,
+      field: 'category',
+      filter: false,
+      select: false,
+      data: items => {
+        return items.map(item => {
+          item.shape.outerBorder = {
+            stroke: item.shape.fill,
+            distance: 2,
+            lineWidth: 1
+          };
+          return item;
         });
       }
+    }
+  ]
+};
+
+// VChart.registerPictogramChart();
+// VChart.default.registerSVG('chinamap', shape);
+
+VChart.registerSVG('chinamap', shape);
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+// Listen for legend item hover events
+vchart.on('legendItemHover', e => {
+  // Gets the legend item name of the hover
+  const hoveredName = e?.value?.data?.label;
+  if (hoveredName) {
+    // Update the chart status by setting the color of the legend item that is not hovering
+    vchart.updateState({
+      legend_hover_reverse: {
+        filter: d => {
+          // Finds the category of the current data item
+          const category = chinamap_data.find(chinamap_data => chinamap_data.name === d.data?.name)?.category;
+          // Return true if the class exists and is not equal to the legend item name of the hover, fals
+          return category && category !== hoveredName;
+        }
+      }
     });
+  }
+});
 
-  // Listen for the legend item unhover event
+// Listen for the legend item unhover event
 vchart.on('legendItemUnHover', e => {
   // Update the chart state to restore the color of all legend items to the original color
   vchart.updateState({
diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-heart.md b/docs/assets/examples/en/pictogram-chart/pictogram-heart.md
index 13521dcdd7..010169d404 100644
--- a/docs/assets/examples/en/pictogram-chart/pictogram-heart.md
+++ b/docs/assets/examples/en/pictogram-chart/pictogram-heart.md
@@ -10,7 +10,7 @@ option: pictogramChart
 
 # Pictogram - Medical Schematic Diagram of the Heart
 
-Contributed by [Zero1017](https://github.com/Eomnational)
+> Contributed by [Zero1017](https://github.com/Eomnational)
 
 A pictogram is a form of data visualization that uses graphic symbols (usually in SVG format) to represent specific values or categories in data. This example demonstrates how to use a pictogram to present a medical schematic diagram of the heart, distinguishing different parts of the heart by different colors.
 
diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-mall.md b/docs/assets/examples/en/pictogram-chart/pictogram-mall.md
index c284360862..9a85ede1a8 100644
--- a/docs/assets/examples/en/pictogram-chart/pictogram-mall.md
+++ b/docs/assets/examples/en/pictogram-chart/pictogram-mall.md
@@ -10,6 +10,8 @@ option: pictogramChart
 
 # SVG Shopping Mall Tenant Layout
 
+> Contributed by Echo
+
 Shopping Mall Tenant Layout pictogram displays the distribution of different business formats within the mall. Each business format is represented by a specific shape, and the color of the shape indicates the type of business format. By using pictograms, we can quickly understand the mall's layout and business format distribution, providing a reference for mall operation and management. Hovering the mouse over the legend reveals the distribution of a specific business format; hovering the mouse over a shape in the diagram displays the name of the store corresponding to that shape.
 
 ## Key Configurations
@@ -105,7 +107,7 @@ const mall_data = [
   { name: 'Kmart', category: 'shopping' },
   { name: 'AMC Theatres', category: 'entertainment' },
   { name: 'Sears', category: 'shopping' }
-]
+];
 
 // Define the chart configuration object
 const spec = {
@@ -115,7 +117,7 @@ const spec = {
     // The unique identifier of the data
     id: 'data',
     // The value of the data
-    values: mall_data,
+    values: mall_data
   },
   color: {
     specified: {
@@ -134,7 +136,7 @@ const spec = {
       // The color of the infrastructure category is dark olive green
       infrastructure: '#556B2F',
       // The color of the undefined category is white
-      undefined: 'white',
+      undefined: 'white'
     },
     // The field for color mapping is category
     field: 'category'
@@ -156,7 +158,7 @@ const spec = {
     state: {
       // The fill color of the legend item when hovering is gray
       legend_hover_reverse: {
-        fill: '#ccc',
+        fill: '#ccc'
       }
     }
   },
@@ -185,9 +187,9 @@ const spec = {
           };
           return item;
         });
-      },
+      }
     }
-  ],
+  ]
 };
 
 VChart.registerSVG('mall', shape);
diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-bagua.md b/docs/assets/examples/zh/pictogram-chart/pictogram-bagua.md
index cdb483692c..5f551f4e01 100644
--- a/docs/assets/examples/zh/pictogram-chart/pictogram-bagua.md
+++ b/docs/assets/examples/zh/pictogram-chart/pictogram-bagua.md
@@ -10,7 +10,7 @@ option: pictogramChart
 
 # 象形图-太极八卦图
 
-Contributed by [xilzy](https://github.com/xilzy)
+> 由 [xilzy](https://github.com/xilzy) 贡献
 
 太极八卦象图展示了先天八卦的各个元素。核心位置为太极图案，中间层为 8 个卦象，最外层为八个卦象的符号图案。卦象符号图案都有对应的五行属性。通过使用象形图，我们可以快速了解先天八卦的布局和元素分布情况，为先天八卦研究和分析提供参考。 鼠标悬停在图例上，可以显示一类属性元素的分布；鼠标悬停在图中的形状上，可以显示该形状对应的元素名称。
 
@@ -114,8 +114,8 @@ const spec = {
       },
       stroke: '#000000', // 边框颜色为黑色
       lineWidth: 2,
-      pickable: datum => datum.name !== 'line',
-      visible: datum => datum.id !== 'path-198'
+      pickable: datum => datum.name !== 'Line',
+      visible: datum => datum => !datum.attributes?.d?.startsWith('M0 0L1024 0L1024 1024L0 1024')
     },
     state: {
       active: {
diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-chinamap.md b/docs/assets/examples/zh/pictogram-chart/pictogram-chinamap.md
index 4a8c285315..ab592e1aa6 100644
--- a/docs/assets/examples/zh/pictogram-chart/pictogram-chinamap.md
+++ b/docs/assets/examples/zh/pictogram-chart/pictogram-chinamap.md
@@ -1,7 +1,7 @@
 ---
 category: examples
 group: pictogram chart
-title: 中国地图吃辣程度一览象形图       
+title: 中国地图吃辣程度一览象形图
 keywords: pictogramChart,map,comparison,china
 order: 26-6
 cover: https://cdn.jsdelivr.net/gh/UC-web291/picture_storing/5.gif
@@ -10,7 +10,7 @@ option: pictogramChart
 
 # 中国地图象形图--中国省份吃辣程度一览
 
-由 Qian_Shark 贡献
+> 由 Qian_Shark 贡献
 
 通过象形图展示中国各地区的分类信息，可根据吃辣的不同类别进行颜色映射，从强到弱颜色越来越偏冷调，同时支持图例悬停交互显示省份信息。
 
@@ -41,7 +41,7 @@ VCHART_MODULE.registerPictogramChart();
 const response = await fetch('https://cdn.jsdelivr.net/gh/UC-web291/picture_storing/chinamap.svg');
 const shape = await response.text();
 // 定义地图数据
-const chinamap_data = [  
+const chinamap_data = [
   { name: '湖南省', category: 'MVP', level: '🌶🌶🌶🌶' },
   { name: '重庆市', category: 'MVP', level: '🌶🌶🌶🌶' },
   { name: '四川省', category: 'MVP', level: '🌶🌶🌶🌶' },
@@ -76,32 +76,31 @@ const chinamap_data = [
   { name: '香港特别行政区', category: 'bronze', level: '🌶' },
   { name: '澳门特别行政区', category: 'bronze', level: '🌶' },
   { name: '台湾省', category: 'bronze', level: '🌶' }
-
-]
+];
 
 // 定义图表配置对象
 const spec = {
   // 图表类型为象形图
-  type: 'pictogram', 
+  type: 'pictogram',
   padding: 0,
   data: {
     // 数据的唯一标识符
     id: 'data',
     // 数据的值
-    values: chinamap_data,
+    values: chinamap_data
   },
   color: {
     specified: {
       // 大师
-      MVP:'rgb(73, 3, 3)',
+      MVP: 'rgb(73, 3, 3)',
       // 钻石
-      diamond:'rgb(250, 8, 8)',
+      diamond: 'rgb(250, 8, 8)',
       //  黄金
-      gold:'rgb(250, 77, 8)',
-       // 白银
-      silver:'rgb(228, 170, 64)',
+      gold: 'rgb(250, 77, 8)',
+      // 白银
+      silver: 'rgb(228, 170, 64)',
       // 青铜
-      bronze:'rgb(198, 238, 53)',
+      bronze: 'rgb(198, 238, 53)',
       // 未定义类别的颜色为白色
       undefined: 'white'
     },
@@ -132,9 +131,9 @@ const spec = {
       },
       hover: {
         lineWidth: 3,
-        stroke:'black',
+        stroke: 'black',
         shadowBlur: 80,
-        shadowColor: 'black',
+        shadowColor: 'black'
       },
       // 鼠标非悬停时的效果，地图向外扩散，透明度降低，阴影模糊度增加
       hover_reverse: {
@@ -167,10 +166,9 @@ const spec = {
           };
           return item;
         });
-      },
+      }
     }
-  ],
-  
+  ]
 };
 
 // VChart.registerPictogramChart();
@@ -194,7 +192,7 @@ vchart.on('legendItemHover', e => {
           // 查找当前数据项的类别
           const category = chinamap_data.find(chinamap_data => chinamap_data.name === d.data?.name)?.category;
           // 如果类别存在且不等于悬停的图例项名称，则返回 true，否则返回 false
-          return category && category!== hoveredName;
+          return category && category !== hoveredName;
         }
       }
     });
diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-heart.md b/docs/assets/examples/zh/pictogram-chart/pictogram-heart.md
index 9ecffb9cfd..80f686b18e 100644
--- a/docs/assets/examples/zh/pictogram-chart/pictogram-heart.md
+++ b/docs/assets/examples/zh/pictogram-chart/pictogram-heart.md
@@ -10,7 +10,7 @@ option: pictogramChart
 
 # 象形图-心脏医学示意图
 
-由 [Zero1017](https://github.com/Eomnational) 贡献
+> 由 [Zero1017](https://github.com/Eomnational) 贡献
 
 象形图是一种数据可视化形式，它通过使用图形符号（通常是 SVG 格式）来表示数据中的具体值或类别。本示例展示了如何使用象形图来呈现心脏医学示意图，通过不同的颜色区分心脏的不同部分。
 
diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-mall.md b/docs/assets/examples/zh/pictogram-chart/pictogram-mall.md
index 419131826b..12f5056f48 100644
--- a/docs/assets/examples/zh/pictogram-chart/pictogram-mall.md
+++ b/docs/assets/examples/zh/pictogram-chart/pictogram-mall.md
@@ -10,15 +10,16 @@ option: pictogramChart
 
 # 象形图-商场业态结构图
 
-商场业态结构图展示了商场中不同业态的分布情况。每个业态都被表示为一个特定的形状，形状的颜色表示业态的类型。 通过使用象形图，我们可以快速了解商场的布局和业态分布情况，为商场运营和管理提供参考。 鼠标悬停在图例上，可以显示具体某个业态的分布；鼠标悬停在图的形状上，可以显示该形状对应的店铺名称。
+> 由 Qian_Shark 贡献
 
+商场业态结构图展示了商场中不同业态的分布情况。每个业态都被表示为一个特定的形状，形状的颜色表示业态的类型。 通过使用象形图，我们可以快速了解商场的布局和业态分布情况，为商场运营和管理提供参考。 鼠标悬停在图例上，可以显示具体某个业态的分布；鼠标悬停在图的形状上，可以显示该形状对应的店铺名称。
 
 ## 关键配置
 
 - 在 SVG 文件中，为图元配置 `name` 属性，则在图表配置中可以通过 `name` 配置指定图元样式；
 - 通过 `VChart.registerSVG` 接口来注册 svg 资源；
 - `svg` 属性声明为注册的 svg 名称；
-- 交互：关闭 `legend` 的 `select` 配置，通过事件监听鼠标悬停图例事件，再通过状态更新 API `updateState` 来实现hover图例项高亮。需要在属性 `pictogram`中设定更新用的`state`。
+- 交互：关闭 `legend` 的 `select` 配置，通过事件监听鼠标悬停图例事件，再通过状态更新 API `updateState` 来实现 hover 图例项高亮。需要在属性 `pictogram`中设定更新用的`state`。
 - 数据：声明数据，数据格式为 `[{name: 'xxx', category: 'xxx'}]`；
 
 ## 代码演示
@@ -117,7 +118,7 @@ const mall_data = [
   { name: 'Kmart', category: 'shopping' },
   { name: 'AMC Theatres', category: 'entertainment' },
   { name: 'Sears', category: 'shopping' }
-]
+];
 
 // 定义图表配置对象
 const spec = {
@@ -127,7 +128,7 @@ const spec = {
     // 数据的唯一标识符
     id: 'data',
     // 数据的值
-    values: mall_data,
+    values: mall_data
   },
   color: {
     specified: {
@@ -146,7 +147,7 @@ const spec = {
       // 基础设施类别的颜色为暗橄榄绿
       infrastructure: '#556B2F',
       // 未定义类别的颜色为白色
-      undefined: 'white',
+      undefined: 'white'
     },
     // 颜色映射的字段为类别
     field: 'category'
@@ -168,7 +169,7 @@ const spec = {
     state: {
       // 图例悬停时的填充颜色为灰色
       legend_hover_reverse: {
-        fill: '#ccc',
+        fill: '#ccc'
       }
     }
   },
@@ -197,9 +198,9 @@ const spec = {
           };
           return item;
         });
-      },
+      }
     }
-  ],
+  ]
 };
 
 // 注册 SVG 图形资源，名称为 mall，图形数据为 shape
@@ -242,7 +243,6 @@ vchart.renderSync();
 
 // Just for the convenience of console debugging, DO NOT COPY!
 window['vchart'] = vchart;
-
 ```
 
 ## 相关教程
diff --git a/packages/vchart/__tests__/runtime/browser/test-page/pictogram_bagua_demo.ts b/packages/vchart/__tests__/runtime/browser/test-page/pictogram_bagua_demo.ts
index 7d48376779..bb5328cf1d 100644
--- a/packages/vchart/__tests__/runtime/browser/test-page/pictogram_bagua_demo.ts
+++ b/packages/vchart/__tests__/runtime/browser/test-page/pictogram_bagua_demo.ts
@@ -82,8 +82,8 @@ const spec = {
       },
       stroke: '#000000', // 边框颜色为黑色
       lineWidth: 2,
-      pickable: datum => datum.name !== 'line',
-      visible: datum => datum.id !== 'path-198'
+      pickable: datum => datum.name !== 'Line',
+      visible: datum => datum => !datum.attributes?.d?.startsWith('M0 0L1024 0L1024 1024L0 1024')
     },
     state: {
       active: {