调整SVG画布尺寸时，如何保持图例组的固定大小？

遇到这种图例被拉伸的情况很常见，核心原因是外层SVG的缩放会作用于所有子元素，包括你的图例组。下面给你几个实用的解决方案，优先推荐纯SVG的无JS方案，简单可靠：

方案1：用嵌套SVG隔离图例 #

把你的图例放在一个独立的嵌套<svg>元素里，这个嵌套SVG可以拥有自己的viewBox和固定的尺寸，外层SVG缩放时不会影响它的内部比例：

<!-- 外层SVG：图表主体，使用viewBox实现自适应缩放 -->
<svg viewBox="0 0 800 600" width="100%" height="auto">
  <!-- 这里放你的可缩放图表内容 -->
  <rect x="0" y="0" width="800" height="600" fill="#f5f5f5"/>
  
  <!-- 嵌套SVG：固定大小的图例 -->
  <svg x="650" y="40" width="140" height="180" viewBox="0 0 140 180" preserveAspectRatio="xMinYMin meet">
    <!-- 你的图例内容：圆形+文本 -->
    <circle cx="18" cy="28" r="7" fill="#e74c3c"/>
    <text x="38" y="32" font-size="13">用户增长</text>
    
    <circle cx="18" cy="68" r="7" fill="#3498db"/>
    <text x="38" y="72" font-size="13">营收数据</text>
  </svg>
</svg>

嵌套SVG的width和height是固定像素值，viewBox匹配图例的原始尺寸，preserveAspectRatio确保内部元素不会变形。外层SVG缩放时，嵌套SVG只会整体移动位置，内部的圆形和文本完全保持原有大小和比例。

方案2：用<symbol>+<use>复用并固定图例 #

如果需要复用图例，或者不想用嵌套SVG，可以先把图例定义为<symbol>，再用<use>引用并设置固定尺寸：

<svg viewBox="0 0 800 600" width="100%" height="auto">
  <defs>
    <!-- 定义图例符号 -->
    <symbol id="chart-legend" viewBox="0 0 140 180">
      <circle cx="18" cy="28" r="7" fill="#e74c3c"/>
      <text x="38" y="32" font-size="13">用户增长</text>
      
      <circle cx="18" cy="68" r="7" fill="#3498db"/>
      <text x="38" y="72" font-size="13">营收数据</text>
    </symbol>
  </defs>
  
  <!-- 图表主体内容 -->
  <rect x="0" y="0" width="800" height="600" fill="#f5f5f5"/>
  
  <!-- 引用图例，固定尺寸 -->
  <use href="#chart-legend" x="650" y="40" width="140" height="180" preserveAspectRatio="xMinYMin meet"/>
</svg>

这个方案和嵌套SVG原理类似，<symbol>的viewBox定义了图例的原始坐标系，<use>元素设置固定的显示尺寸，确保图例不会随外层SVG缩放变形。

方案3：JS反向缩放（适合动态场景） #

如果你的图表需要更复杂的动态交互，比如图例位置需要随图表变化，可以用JS监听缩放，给图例组应用反向缩放抵消外层的影响：

const mainSvg = document.querySelector('svg');
const legendGroup = document.getElementById('legend-group');

function fixLegendScale() {
  // 计算外层SVG的缩放比例
  const viewBoxParts = mainSvg.getAttribute('viewBox').split(' ');
  const viewBoxWidth = parseFloat(viewBoxParts[2]);
  const currentDisplayWidth = mainSvg.clientWidth;
  const scaleRatio = currentDisplayWidth / viewBoxWidth;
  
  // 反向缩放图例，抵消外层缩放
  legendGroup.style.transform = `scale(${1/scaleRatio})`;
  // 调整位置，避免缩放后偏移
  legendGroup.style.transformOrigin = 'top left';
  legendGroup.setAttribute('x', 650 * scaleRatio);
  legendGroup.setAttribute('y', 40 * scaleRatio);
}

// 初始化执行
fixLegendScale();
// 监听窗口 resize 事件
window.addEventListener('resize', fixLegendScale);

这个方案需要JS支持，但灵活性更高，适合需要动态调整的场景。

为什么你的原方案（追加新组）不太推荐？ #

追加新组本质上还是在同一个SVG坐标系下，只要外层SVG的viewBox缩放，新组里的元素还是会被拉伸，除非你给新组单独设置反向缩放，这其实和方案3的思路一致，但不如嵌套SVG或symbol方案简洁可靠。

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