rustdoc集成交互式依赖图：解决缩放平移与主题适配问题

问题1：给rustdoc注入交互JS实现缩放平移 #

要让depgraph生成的依赖图支持类似Doxygen的缩放平移，核心是利用rustdoc的自定义注入能力，配合JS实现交互逻辑：

1. 包装SVG容器：
   把depgraph生成的SVG放在带样式的容器div中，比如创建depgraph.html文件：

   <div class="depgraph-container" style="overflow: hidden; position: relative; width: 100%; height: 600px;">
     <svg id="depgraph-svg" style="width: 100%; height: 100%; transform-origin: 0 0;" viewBox="0 0 1200 800">
       <!-- 插入depgraph生成的SVG内容 -->
     </svg>
   </div>
   

   替换viewBox里的尺寸为实际SVG的宽高。

2. 编写交互JS：
   创建depgraph-interactive.js，实现基础缩放和平移：

   const container = document.querySelector('.depgraph-container');
   const svg = document.getElementById('depgraph-svg');
   if (!svg) return;
   
   let scale = 1;
   let offsetX = 0;
   let offsetY = 0;
   let isDragging = false;
   let startX, startY;
   
   // 滚轮缩放
   container.addEventListener('wheel', (e) => {
     e.preventDefault();
     const delta = e.deltaY > 0 ? 0.9 : 1.1;
     scale *= delta;
     scale = Math.max(0.5, Math.min(5, scale));
     updateTransform();
   });
   
   // 鼠标拖拽平移
   container.addEventListener('mousedown', (e) => {
     if (e.target.tagName !== 'svg') return;
     isDragging = true;
     startX = e.clientX - offsetX;
     startY = e.clientY - offsetY;
     container.style.cursor = 'grabbing';
   });
   
   document.addEventListener('mousemove', (e) => {
     if (!isDragging) return;
     offsetX = e.clientX - startX;
     offsetY = e.clientY - startY;
     updateTransform();
   });
   
   document.addEventListener('mouseup', () => {
     isDragging = false;
     container.style.cursor = 'grab';
   });
   
   function updateTransform() {
     svg.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
   }
   

3. 注入到rustdoc：
   执行cargo doc时通过参数注入资源：

   cargo doc --html-in-header depgraph-interactive.js --html-in-header depgraph.html
   

   若只需在特定模块嵌入，用rustdoc属性直接插入：

   #[doc = include_str!("depgraph.html")]
   pub mod core {
     // 模块内容
   }
   

问题2：让SVG适配CSS主题 #

要让SVG跟随rustdoc的明暗主题变化，需替换硬编码颜色为动态CSS变量：

1. 修改SVG颜色属性：
   将SVG中固定颜色值替换为rustdoc内置的CSS变量或currentColor：

   <!-- 原硬编码颜色 -->
   <rect fill="white" stroke="black" />
   <text fill="black" />
   
   <!-- 修改后 -->
   <rect fill="var(--bg-color)" stroke="var(--fg-color)" />
   <text fill="currentColor" />
   

   可通过浏览器开发者工具查看rustdoc实际使用的CSS变量名（如--fg-color、--bg-color）。

2. 自动替换脚本（可选）：
   若depgraph不支持自定义模板，用脚本批量替换：

   with open("depgraph.svg", "r") as f:
       content = f.read()
   
   content = content.replace('fill="white"', 'fill="var(--bg-color)"')
   content = content.replace('fill="black"', 'fill="currentColor"')
   content = content.replace('stroke="black"', 'stroke="var(--fg-color)"')
   
   with open("depgraph-themed.svg", "w") as f:
       f.write(content)
   

3. 验证适配效果：
   切换rustdoc主题时，SVG颜色会自动跟随页面主题变化。

内容的提问来源于stack exchange，提问作者Makogan