diff --git a/src/components/webtopo-svg-edit/components/center-panel/index.vue b/src/components/webtopo-svg-edit/components/center-panel/index.vue
index aaea1b4..18ecdd1 100644
--- a/src/components/webtopo-svg-edit/components/center-panel/index.vue
+++ b/src/components/webtopo-svg-edit/components/center-panel/index.vue
@@ -38,64 +38,46 @@
           :transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
           v-show="item.display"
         >
-          <g
-            :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
-              item.actual_bound.y + item.actual_bound.height / 2
-            })rotate(${item.rotate}) scale(1) translate(${-(
-              item.actual_bound.x +
-              item.actual_bound.width / 2
-            )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-            @mousedown="onSvgMouseDown(item, index, $event)"
-            @mouseenter="onSvgMouseEnter(item, index, $event)"
-            @mouseleave="onSvgMouseLeave(item, index, $event)"
-            @contextmenu="onSvgContextMenuEvent(item, index, $event)"
-          >
-            <connection-line
-              v-if="item.type === EDoneJsonType.ConnectionLine"
-              :item-info="item"
-              :point-visiable="
-                visiable_info.connection_line && visiable_info.select_item.info?.id == item.id
-              "
-            ></connection-line>
-            <use
-              v-else-if="item.type === EDoneJsonType.File"
-              :xlink:href="`#svg-${item.name}`"
-              v-bind="prosToVBind(item)"
-              width="100"
-              height="100"
-              :id="item.id"
+          <g :class="`${getCommonClass(item)}`">
+            <g
               :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
                 item.actual_bound.y + item.actual_bound.height / 2
-              }) scale(${item.scale_x},${item.scale_y}) translate(${-(
+              })rotate(${item.rotate}) scale(1) translate(${-(
                 item.actual_bound.x +
                 item.actual_bound.width / 2
               )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-              :class="`${getCommonClass(item)}`"
-            ></use>
-            <component
-              v-else-if="item.type === EDoneJsonType.CustomSvg"
-              :is="item.tag"
-              v-bind="prosToVBind(item)"
-              width="100"
-              height="100"
-              :id="item.id"
-              :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
-                item.actual_bound.y + item.actual_bound.height / 2
-              }) scale(${item.scale_x},${item.scale_y}) translate(${-(
-                item.actual_bound.x +
-                item.actual_bound.width / 2
-              )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-              :class="`${getCommonClass(item)}`"
-            ></component>
-            <foreignObject
-              v-else-if="item.type === EDoneJsonType.Vue"
-              v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
-              :id="`foreign-object${item.id}`"
-              :class="`${getCommonClass(item)}`"
+              @mousedown="onSvgMouseDown(item, index, $event)"
+              @mouseenter="onSvgMouseEnter(item, index, $event)"
+              @mouseleave="onSvgMouseLeave(item, index, $event)"
+              @contextmenu="onSvgContextMenuEvent(item, index, $event)"
             >
+              <connection-line
+                v-if="item.type === EDoneJsonType.ConnectionLine"
+                :item-info="item"
+                :point-visiable="
+                  visiable_info.connection_line && visiable_info.select_item.info?.id == item.id
+                "
+              ></connection-line>
+              <use
+                v-else-if="item.type === EDoneJsonType.File"
+                :xlink:href="`#svg-${item.name}`"
+                v-bind="prosToVBind(item)"
+                width="100"
+                height="100"
+                :id="item.id"
+                :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+                  item.actual_bound.y + item.actual_bound.height / 2
+                }) scale(${item.scale_x},${item.scale_y}) translate(${-(
+                  item.actual_bound.x +
+                  item.actual_bound.width / 2
+                )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+              ></use>
               <component
+                v-else-if="item.type === EDoneJsonType.CustomSvg"
                 :is="item.tag"
                 v-bind="prosToVBind(item)"
+                width="100"
+                height="100"
                 :id="item.id"
                 :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
                   item.actual_bound.y + item.actual_bound.height / 2
@@ -103,67 +85,84 @@
                   item.actual_bound.x +
                   item.actual_bound.width / 2
                 )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-                >{{ item.tag_slot }}</component
+              ></component>
+              <foreignObject
+                v-else-if="item.type === EDoneJsonType.Vue"
+                v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
+                :id="`foreign-object${item.id}`"
               >
-            </foreignObject>
+                <component
+                  :is="item.tag"
+                  v-bind="prosToVBind(item)"
+                  :id="item.id"
+                  :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+                    item.actual_bound.y + item.actual_bound.height / 2
+                  }) scale(${item.scale_x},${item.scale_y}) translate(${-(
+                    item.actual_bound.x +
+                    item.actual_bound.width / 2
+                  )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+                  >{{ item.tag_slot }}</component
+                >
+              </foreignObject>
 
-            <line
-              v-else-if="item.type === EDoneJsonType.StraightLine"
-              :id="item.id"
-              :x1="item.props.start_x.val"
-              :y1="item.props.start_y.val"
-              :x2="item.props.end_x.val"
-              :y2="item.props.end_y.val"
-              fill="#FF0000"
-              stroke="#FF0000"
-              stroke-width="2"
-            ></line>
-            <rect
-              v-if="item.config.actual_rect"
-              :id="`rect${item.id}`"
-              fill="black"
-              fill-opacity="0"
-              v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
-              style="stroke: none; stroke-width: 2; stroke-miterlimit: 10"
-              :class="`${
-                globalStore.intention == EGlobalStoreIntention.None ||
-                globalStore.intention == EGlobalStoreIntention.Select
-                  ? 'svg-item-none'
-                  : ''
-              }
+              <line
+                v-else-if="item.type === EDoneJsonType.StraightLine"
+                :id="item.id"
+                :x1="item.props.start_x.val"
+                :y1="item.props.start_y.val"
+                :x2="item.props.end_x.val"
+                :y2="item.props.end_y.val"
+                fill="#FF0000"
+                stroke="#FF0000"
+                stroke-width="2"
+              ></line>
+              <rect
+                v-if="item.config.actual_rect"
+                :id="`rect${item.id}`"
+                fill="black"
+                fill-opacity="0"
+                v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
+                style="stroke: none; stroke-width: 2; stroke-miterlimit: 10"
+                :class="`${
+                  globalStore.intention == EGlobalStoreIntention.None ||
+                  globalStore.intention == EGlobalStoreIntention.Select
+                    ? 'svg-item-none'
+                    : ''
+                }
                                     ${
                                       globalStore.intention == EGlobalStoreIntention.Move &&
                                       globalStore.handle_svg_info?.info.id == item.id
                                         ? 'svg-item-move'
                                         : ''
                                     } ${
-                globalStore.intention == EGlobalStoreIntention.Select &&
-                globalStore.handle_svg_info?.info.id == item.id
-                  ? 'svg-item-select'
-                  : ''
-              } ${getCommonClass(item)}`"
-            ></rect>
-            <handle-panel
-              v-if="
-                globalStore.handle_svg_info?.info.id === item.id &&
-                visiable_info.handle_panel &&
-                item.config.can_zoom
-              "
-              :item-info="item"
-            ></handle-panel>
-            <connection-panel
-              v-if="
-                visiable_info.select_item.info?.id == item.id &&
-                visiable_info.connection_panel &&
-                item.config.have_anchor &&
-                (globalStore.intention === EGlobalStoreIntention.Select
-                  ? item.id !== globalStore.handle_svg_info?.info.id
-                    ? true
-                    : false
-                  : true)
-              "
-              :item-info="item"
-            ></connection-panel>
+                  globalStore.intention == EGlobalStoreIntention.Select &&
+                  globalStore.handle_svg_info?.info.id == item.id
+                    ? 'svg-item-select'
+                    : ''
+                }`"
+              ></rect>
+              <handle-panel
+                v-if="
+                  globalStore.handle_svg_info?.info.id === item.id &&
+                  visiable_info.handle_panel &&
+                  item.config.can_zoom
+                "
+                :item-info="item"
+              ></handle-panel>
+              <connection-panel
+                v-if="
+                  visiable_info.select_item.info?.id == item.id &&
+                  visiable_info.connection_panel &&
+                  item.config.have_anchor &&
+                  (globalStore.intention === EGlobalStoreIntention.Select
+                    ? item.id !== globalStore.handle_svg_info?.info.id
+                      ? true
+                      : false
+                    : true)
+                "
+                :item-info="item"
+              ></connection-panel>
+            </g>
           </g>
         </g>
       </g>
diff --git a/src/components/webtopo-svg-preview/index.vue b/src/components/webtopo-svg-preview/index.vue
index 894750d..a97d91a 100644
--- a/src/components/webtopo-svg-preview/index.vue
+++ b/src/components/webtopo-svg-preview/index.vue
@@ -25,57 +25,39 @@
           :transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
           v-show="item.display"
         >
-          <g
-            :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
-              item.actual_bound.y + item.actual_bound.height / 2
-            })rotate(${item.rotate}) scale(1) translate(${-(
-              item.actual_bound.x +
-              item.actual_bound.width / 2
-            )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-          >
-            <connection-line
-              v-if="item.type === EDoneJsonType.ConnectionLine"
-              :item-info="item"
-            ></connection-line>
-            <use
-              v-else-if="item.type === EDoneJsonType.File"
-              :xlink:href="`#svg-${item.name}`"
-              v-bind="prosToVBind(item)"
-              width="100"
-              height="100"
-              :id="item.id"
+          <g :class="`${getCommonClass(item)}`">
+            <g
               :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
                 item.actual_bound.y + item.actual_bound.height / 2
-              }) scale(${item.scale_x},${item.scale_y}) translate(${-(
+              })rotate(${item.rotate}) scale(1) translate(${-(
                 item.actual_bound.x +
                 item.actual_bound.width / 2
               )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-              :class="`${getCommonClass(item)}`"
-            ></use>
-            <component
-              v-else-if="item.type === EDoneJsonType.CustomSvg"
-              :is="item.tag"
-              v-bind="prosToVBind(item)"
-              width="100"
-              height="100"
-              :id="item.id"
-              :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
-                item.actual_bound.y + item.actual_bound.height / 2
-              }) scale(${item.scale_x},${item.scale_y}) translate(${-(
-                item.actual_bound.x +
-                item.actual_bound.width / 2
-              )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-              :class="`${getCommonClass(item)}`"
-            ></component>
-            <foreignObject
-              v-else-if="item.type === EDoneJsonType.Vue"
-              v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
-              :id="`foreign-object${item.id}`"
-              :class="`${getCommonClass(item)}`"
             >
+              <connection-line
+                v-if="item.type === EDoneJsonType.ConnectionLine"
+                :item-info="item"
+              ></connection-line>
+              <use
+                v-else-if="item.type === EDoneJsonType.File"
+                :xlink:href="`#svg-${item.name}`"
+                v-bind="prosToVBind(item)"
+                width="100"
+                height="100"
+                :id="item.id"
+                :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+                  item.actual_bound.y + item.actual_bound.height / 2
+                }) scale(${item.scale_x},${item.scale_y}) translate(${-(
+                  item.actual_bound.x +
+                  item.actual_bound.width / 2
+                )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+              ></use>
               <component
+                v-else-if="item.type === EDoneJsonType.CustomSvg"
                 :is="item.tag"
                 v-bind="prosToVBind(item)"
+                width="100"
+                height="100"
                 :id="item.id"
                 :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
                   item.actual_bound.y + item.actual_bound.height / 2
@@ -83,9 +65,26 @@
                   item.actual_bound.x +
                   item.actual_bound.width / 2
                 )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-              >{{ item.tag_slot }}</component
+              ></component>
+              <foreignObject
+                v-else-if="item.type === EDoneJsonType.Vue"
+                v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
+                :id="`foreign-object${item.id}`"
               >
-            </foreignObject>
+                <component
+                  :is="item.tag"
+                  v-bind="prosToVBind(item)"
+                  :id="item.id"
+                  :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+                    item.actual_bound.y + item.actual_bound.height / 2
+                  }) scale(${item.scale_x},${item.scale_y}) translate(${-(
+                    item.actual_bound.x +
+                    item.actual_bound.width / 2
+                  )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+                >{{ item.tag_slot }}</component
+                >
+              </foreignObject>
+            </g>
           </g>
         </g>
       </g>