放大缩小

css/style.css

@@ -284,10 +284,10 @@ iconify-icon {
 }
 
 .svg-content-wrapper {
-  flex: 1;
+  /* flex: 1; */
-  margin: 1rem;
+  /* margin: 1rem; */
   display: inline-block;
-  text-align: center;
+  /* text-align: center; */
   transform-origin: center top;
 }
 

index.html

@@ -228,8 +228,8 @@
     <script src="js/modules/swot.js"></script>
     <script src="js/modules/echarts.js"></script>
     <script src="js/modules/mermaid.js"></script>
-    <script src="js/vendor/mermaid.min.js"></script>
+    <script src="libs/js/mermaid.min.js"></script>
-    <script src="js/vendor/svg-pan-zoom.min.js"></script>
+    <script src="libs/js/svg-pan-zoom.min.js"></script>
     <script src="libs/js/echarts.min.js"></script>
     <script src="js/core/module-runtime.js"></script>
     <script src="js/core/app-shell.js"></script>

js/core/app-shell.js

@@ -1049,7 +1049,8 @@
       return svgContent;
     }
 
-    initializeMermaidPanZoom(svgElement, manifest) {
+    initializeMermaidPanZoom(svgElementid, manifest) {
+      let svgElement = document.getElementById(svgElementid);
       if (!svgElement) return;
       if (!window.svgPanZoom) {
         console.warn('svgPanZoom 脚本未加载，无法提供平移缩放');
@@ -1095,7 +1096,7 @@
         }
       };
 
-      this.mermaidPanZoom = window.svgPanZoom(svgElement, {
+      this.mermaidPanZoom = window.svgPanZoom(`#${svgElementid}`, {
         zoomEnabled: true,
         controlIconsEnabled: true,
         fit: true,
@@ -1194,8 +1195,8 @@
         });
         const svgElement = this.el.viewer.querySelector('svg');
         if (svgElement) {
-          svgElement.setAttribute('id', 'mermaidSvg');
+          const svgid = svgElement.getAttribute('id', 'mermaidSvg');
-          this.initializeMermaidPanZoom(svgElement, manifest);
+          this.initializeMermaidPanZoom(svgid, manifest);
         }
       } catch (error) {
         this.destroyMermaidPanZoom();