diff --git a/src/assets/svgs/switch-demo.svg b/src/assets/svgs/switch-demo.svg
new file mode 100644
index 0000000..d39eaf0
--- /dev/null
+++ b/src/assets/svgs/switch-demo.svg
@@ -0,0 +1,5 @@
+<svg t="1683299647629" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <path d="M735.2 792.4H287.6C136.9 792.4 14.2 669.8 14.2 519c0-150.9 122.6-273.5 273.4-273.5h447.6c150.7 0 273.4 122.6 273.4 273.4 0 150.9-122.7 273.5-273.4 273.5zM287.6 300.2c-120.6 0-218.7 98.1-218.7 218.7 0 120.8 98.1 218.9 218.7 218.9h447.6c120.6 0 218.7-98.1 218.7-218.7 0-120.8-98.1-218.9-218.7-218.9H287.6z" fill="#666666"></path>
+    <path d="M724.7 687.1c-92.7 0-168.1-75.4-168.1-168.1S632 350.9 724.7 350.9 892.8 426.3 892.8 519s-75.4 168.1-168.1 168.1z m0-278.6c-60.9 0-110.5 49.6-110.5 110.5s49.5 110.5 110.5 110.5S835.1 579.9 835.1 519s-49.5-110.5-110.4-110.5z" fill="#666666"></path>
+</svg>
\ No newline at end of file
diff --git a/src/components/webtopo-svg-edit/components/custom-svg/switch-demo/index.vue b/src/components/webtopo-svg-edit/components/custom-svg/switch-demo/index.vue
new file mode 100644
index 0000000..54e4d1c
--- /dev/null
+++ b/src/components/webtopo-svg-edit/components/custom-svg/switch-demo/index.vue
@@ -0,0 +1,42 @@
+<!-- eslint-disable vue/html-indent -->
+<template>
+  <g :id="props.id">
+    <symbol viewBox="0 0 1024 1024" :id="`${props.id}switch-demo-open`">
+      <path
+        d="M735.2 792.4H287.6C136.9 792.4 14.2 669.8 14.2 519c0-150.9 122.6-273.5 273.4-273.5h447.6c150.7 0 273.4 122.6 273.4 273.4 0 150.9-122.7 273.5-273.4 273.5zM287.6 300.2c-120.6 0-218.7 98.1-218.7 218.7 0 120.8 98.1 218.9 218.7 218.9h447.6c120.6 0 218.7-98.1 218.7-218.7 0-120.8-98.1-218.9-218.7-218.9H287.6z"
+        fill="#666666"
+      ></path>
+      <path
+        d="M724.7 687.1c-92.7 0-168.1-75.4-168.1-168.1S632 350.9 724.7 350.9 892.8 426.3 892.8 519s-75.4 168.1-168.1 168.1z m0-278.6c-60.9 0-110.5 49.6-110.5 110.5s49.5 110.5 110.5 110.5S835.1 579.9 835.1 519s-49.5-110.5-110.4-110.5z"
+        fill="#666666"
+      ></path>
+    </symbol>
+    <symbol viewBox="0 0 1024 1024" :id="`${props.id}switch-demo-close`">
+      <path
+        d="M704 224H320C161.216 224 32 353.216 32 512c0 158.816 129.216 288 288 288h384c158.816 0 288-129.184 288-288 0-158.784-129.184-288-288-288z m0 512H320C196.48 736 96 635.488 96 512c0-123.52 100.48-224 224-224h384c123.488 0 224 100.48 224 224 0 123.488-100.512 224-224 224z"
+      ></path>
+      <path
+        d="M320 320c-105.888 0-192 86.112-192 192s86.112 192 192 192 192-86.112 192-192-86.112-192-192-192z m0 320c-70.592 0-128-57.408-128-128s57.408-128 128-128 128 57.408 128 128-57.408 128-128 128z"
+      ></path>
+    </symbol>
+    <use
+      v-if="props.isOpen"
+      :xlink:href="`#${props.id}switch-demo-open`"
+      width="100"
+      height="100"
+    ></use>
+    <use v-else :xlink:href="`#${props.id}switch-demo-close`" width="100" height="100"></use>
+  </g>
+</template>
+<script setup lang="ts">
+  const props = defineProps({
+    id: {
+      type: String,
+      default: ''
+    },
+    isOpen: {
+      type: Boolean,
+      default: true
+    }
+  });
+</script>
diff --git a/src/config-center/index.ts b/src/config-center/index.ts
index 6c96685..ef25ccb 100644
--- a/src/config-center/index.ts
+++ b/src/config-center/index.ts
@@ -1,6 +1,7 @@
 import { svgfile_config_center } from './svg-file';
 import { IComponentImport, IConfigCenter } from './types';
 import customSvgText from '@/components/webtopo-svg-edit/components/custom-svg/custom-svg-text/index.vue';
+import switchDemo from '@/components/webtopo-svg-edit/components/custom-svg/switch-demo/index.vue';
 import { vue_config_center } from './vue';
 import { ElButton, ElTag } from 'element-plus';
 import CommonTable from '@/components/webtopo-svg-edit/components/custom-vue/common-table/index.vue';
@@ -14,5 +15,6 @@ export const ComponentImport: IComponentImport = {
   'el-button': ElButton,
   'el-tag': ElTag,
   'custom-vue-common-table': CommonTable,
-  'pie-charts': PieCharts
+  'pie-charts': PieCharts,
+  'switch-demo': switchDemo
 };
diff --git a/src/config-center/svg-file/custom-svg/index.ts b/src/config-center/svg-file/custom-svg/index.ts
index f6c83fe..eea17f2 100644
--- a/src/config-center/svg-file/custom-svg/index.ts
+++ b/src/config-center/svg-file/custom-svg/index.ts
@@ -1,8 +1,8 @@
 import { IConfigComponentGroup } from '../../types';
 import { custom_svg_text } from './custom-svg-text';
-
+import { switch_demo } from './switch-demo';
 export const custom_svg_group: IConfigComponentGroup = {
   groupType: 'custom_svg_group',
   title: '自定义svg',
-  list: [custom_svg_text]
+  list: [custom_svg_text, switch_demo]
 };
diff --git a/src/config-center/svg-file/custom-svg/switch-demo/index.ts b/src/config-center/svg-file/custom-svg/switch-demo/index.ts
new file mode 100644
index 0000000..48760c4
--- /dev/null
+++ b/src/config-center/svg-file/custom-svg/switch-demo/index.ts
@@ -0,0 +1,27 @@
+import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '@/config-center/types';
+
+export const switch_demo: IConfigItem = {
+  name: 'switch-demo',
+  title: '开关演示',
+  tag: 'switch-demo',
+  type: EDoneJsonType.CustomSvg,
+  display: true,
+  config: {
+    can_zoom: true,
+    have_anchor: true,
+    actual_rect: true
+  },
+  props: {
+    isOpen: {
+      title: '开关',
+      type: EConfigItemPropsType.Switch,
+      val: true
+    }
+  },
+  common_animations: {
+    val: '',
+    delay: 'delay-0s',
+    speed: 'slow',
+    repeat: 'infinite'
+  }
+};