如何在SVG中绘制不受viewBox缩放影响的固定尺寸矩形手柄？

当你给SVG元素设置viewBox时，整个SVG的用户坐标空间会被缩放以适配SVG的视口（浏览器中的显示区域）。此时你写的width="10px"中的px是SVG用户坐标单位，不是屏幕像素——它会跟着viewBox的缩放比例一起被拉伸或缩小，所以手柄尺寸无法保持固定。

下面是几种可行的解决办法：

方法1：用HTML元素绝对定位（推荐） #

将手柄做成独立的HTML元素，通过绝对定位放在SVG上方，完全脱离SVG的坐标系统，尺寸直接用屏幕像素定义，不受viewBox影响。

<style>
  .svg-wrap {
    position: relative;
    width: 800px; /* SVG的显示宽度 */
    height: 600px; /* SVG的显示高度 */
  }
  .svg-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ff4444;
    border: 1px solid #fff;
    cursor: move;
    pointer-events: auto; /* 确保手柄能捕获鼠标事件 */
  }
</style>

<div class="svg-wrap">
  <svg viewBox="0 0 1000 1000">
    <!-- 你的CAD图形内容 -->
    <rect x="150" y="150" width="300" height="200" fill="#2196F3" />
  </svg>
  <!-- 手柄位置：根据SVG viewBox坐标计算屏幕位置 -->
  <div class="svg-handle" style="left: calc(450/1000*800px); top: calc(350/1000*600px)"></div>
</div>

当viewBox变化时，只需要重新计算left和top的calc值即可（公式：(SVG用户坐标 / viewBox宽度) * SVG显示宽度）。

方法2：在SVG内使用视口单位 #

SVG支持CSS视口单位（vw/vh/vmin），这些单位基于SVG的显示视口（屏幕尺寸），而非用户坐标。你可以用这些单位定义手柄尺寸，确保它不随viewBox缩放：

<svg viewBox="0 0 1000 1000" width="800px" height="600px">
  <!-- CAD图形 -->
  <rect x="150" y="150" width="300" height="200" fill="#2196F3" />
  <!-- 手柄：用vmin确保在不同屏幕尺寸下保持一致大小 -->
  <rect 
    x="450" y="350" 
    width="1.666vmin" height="1.666vmin" 
    fill="#ff4444" 
    style="pointer-events: auto;"
  />
</svg>

注：1.666vmin的取值是根据SVG显示高度600px计算的——10px占600px的比例为(10/600)*100≈1.666，这样能保证手柄在屏幕上显示为10px左右

方法3：动态反向缩放手柄 #

当修改viewBox时，计算缩放比例，给手柄应用反向的transform: scale()，抵消viewBox的缩放效果：

const svgEl = document.querySelector('svg');
const handleEl = document.querySelector('#handle');
// 初始viewBox参数
const initialViewBox = { width: 1000, height: 1000 };

function updateViewBox(newWidth, newHeight) {
  // 更新SVG的viewBox
  svgEl.setAttribute('viewBox', `0 0 ${newWidth} ${newHeight}`);
  
  // 计算缩放比例：初始尺寸 / 新viewBox尺寸
  const scaleX = initialViewBox.width / newWidth;
  const scaleY = initialViewBox.height / newHeight;
  
  // 应用反向缩放，同时调整手柄位置
  handleEl.setAttribute('transform', `scale(${scaleX}, ${scaleY})`);
  // 手柄原始用户坐标
  const originalX = 450;
  const originalY = 350;
  // 转换为新viewBox下的坐标
  handleEl.setAttribute('x', originalX * (newWidth / initialViewBox.width));
  handleEl.setAttribute('y', originalY * (newHeight / initialViewBox.height));
}

// 调用示例：将viewBox缩小为原来的一半
updateViewBox(500, 500);

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