ESP8266 WebServer中SVG的viewPort/viewBox配置及缩放平移问题求助

一、修复SVG垂直排列的布局问题 #

• 问题根源：EasyEDA导出的SVG可能因默认块级元素流、未正确嵌套容器导致垂直排列，需通过CSS强制容器与SVG的嵌套布局。
• 解决步骤：
  1. 给SVG套一个带裁剪功能的容器，设置固定宽高并开启溢出隐藏：

     .svg-container {
       width: 320px; /* 适配ESP8266网页的显示宽度 */
       height: 480px; /* 适配显示高度 */
       overflow: hidden;
       border: 1px solid #333;
       position: relative;
       margin: 10px auto;
     }
     

  2. 给SVG设置绝对定位，脱离默认文档流：

     .svg-container svg {
       position: absolute;
       cursor: grab;
       transform-origin: 0 0; /* 确保缩放、平移的原点正确 */
     }
     

二、正确配置viewBox与viewPort #

• viewPort：即SVG标签的width和height属性，定义SVG在页面中占据的初始尺寸，建议与容器宽高一致，避免初始拉伸。
• viewBox：格式为min-x min-y width height，对应SVG内部原理图的实际坐标范围（EasyEDA导出的SVG通常自带正确的viewBox，若丢失，可通过浏览器开发者工具查看图形的边界坐标手动补充）。
• 核心规则：viewBox的宽高比必须与viewPort（SVG的width/height）的宽高比一致，否则图形会变形。示例：

  <svg width="320" height="480" viewBox="0 0 1200 1800" xmlns="http://www.w3.org/2000/svg">
    <!-- EasyEDA导出的SVG元素内容 -->
  </svg>
  

三、无库实现缩放、平移及边界裁剪 #

以下纯JS代码直接嵌入HTML，实现鼠标拖拽平移、滚轮缩放，同时限制SVG不会拖出容器可视区域：

const container = document.querySelector('.svg-container');
const svg = container.querySelector('svg');

// 初始状态参数
let scale = 1;
let offsetX = 0;
let offsetY = 0;
let isDragging = false;
let startX, startY;

// 拖拽开始
container.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - offsetX;
  startY = e.clientY - offsetY;
  svg.style.cursor = 'grabbing';
});

// 拖拽过程
document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  offsetX = e.clientX - startX;
  offsetY = e.clientY - startY;
  updateTransform();
});

// 拖拽结束（含边界裁剪）
document.addEventListener('mouseup', () => {
  isDragging = false;
  svg.style.cursor = 'grab';
  
  const containerRect = container.getBoundingClientRect();
  const svgRect = svg.getBoundingClientRect();
  
  // X方向边界限制：SVG不能超出容器左侧或右侧
  if (offsetX > 0) offsetX = 0;
  if (offsetX < containerRect.width - svgRect.width) {
    offsetX = containerRect.width - svgRect.width;
  }
  
  // Y方向边界限制：SVG不能超出容器顶部或底部
  if (offsetY > 0) offsetY = 0;
  if (offsetY < containerRect.height - svgRect.height) {
    offsetY = containerRect.height - svgRect.height;
  }
  
  updateTransform();
});

// 滚轮缩放
container.addEventListener('wheel', (e) => {
  e.preventDefault();
  const delta = e.deltaY > 0 ? 0.9 : 1.1; // 缩小/放大比例
  const oldScale = scale;
  scale *= delta;
  
  // 限制缩放范围（防止过大或过小）
  scale = Math.max(0.5, Math.min(3, scale));
  
  // 以鼠标位置为中心缩放，修正偏移
  const mouseX = e.clientX - container.getBoundingClientRect().left;
  const mouseY = e.clientY - container.getBoundingClientRect().top;
  offsetX = mouseX - (mouseX - offsetX) * (scale / oldScale);
  offsetY = mouseY - (mouseY - offsetY) * (scale / oldScale);
  
  updateTransform();
  // 缩放后触发边界检查
  document.dispatchEvent(new Event('mouseup'));
});

// 应用变换到SVG
function updateTransform() {
  svg.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
}

四、ESP8266 WebServer整合示例 #

将以下代码作为网页响应内容返回给客户端：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Schematic Viewer</title>
  <style>
    .svg-container {
      width: 320px;
      height: 480px;
      overflow: hidden;
      border: 1px solid #333;
      position: relative;
      margin: 10px auto;
    }
    .svg-container svg {
      position: absolute;
      cursor: grab;
      transform-origin: 0 0;
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <!-- 替换为你的EasyEDA导出的SVG代码，保留viewBox属性 -->
    <svg width="320" height="480" viewBox="0 0 1200 1800" xmlns="http://www.w3.org/2000/svg">
      <!-- EasyEDA SVG元素 -->
    </svg>
  </div>
  <script>
    // 粘贴上面的JS代码
  </script>
</body>
</html>

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