本文介绍一种结合 CSS 与 JavaScript 的方案，使嵌入 <table> 中的多个 <svg> 元素既能按原始比例自动收缩以适配容器宽度，又能在空间充足时保持各自固有尺寸，同时兼容表格内其他内容。

本文介绍一种结合 css 与 javascript 的方案，使嵌入 `

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

` 中的多个 `

在响应式网页中，将 <svg> 嵌入 <table> 并实现智能尺寸适配是一个常见但具挑战性的需求。纯 CSS 难以动态计算并按比例分配 SVG 宽度（尤其当需基于 viewBox 中定义的原始宽高比进行等比缩放时），因此需借助轻量级 JavaScript 辅助完成动态布局逻辑。

✅ 核心思路

• CSS 层：确保表格使用 table-layout: fixed，SVG 设置为 display: block + max-width: 100% + height: auto，为缩放提供基础响应能力；
• JS 层：通过 getBoundingClientRect() 获取当前 SVG 实际渲染宽度（含 viewBox 比例信息），计算总宽与容器可用宽度的比值，再按原始 viewBox 宽度比例重新分配每个 SVG 的 width 属性，从而实现等比缩放。

? 示例代码（完整可运行）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格内 SVG 自适应布局</title>
  <style>
    table {
      width: 100%;
      table-layout: fixed; /* 关键：启用固定列宽算法 */
      border-collapse: collapse;
      margin: 1rem 0;
    }
    td {
      padding: 0;
      vertical-align: top;
    }
    svg {
      display: block;
      max-width: 100%;
      height: auto;
      /* 确保 SVG 不溢出单元格，同时保留 viewBox 定义的宽高比 */
    }
  </style>
</head>
<body>

<table>
  <tbody>
    <tr>
      <td>
        <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
          <image href="/my_image1.png" width="1000" height="500"/>
          <rect x="100" y="100" width="800" height="300" fill="rgba(255,0,0,0.2)"/>
        </svg>
      </td>
      <td>
        <svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
          <image href="/my_image2.png" width="800" height="400"/>
          <circle cx="400" cy="200" r="150" fill="rgba(0,128,255,0.2)"/>
        </svg>
      </td>
    </tr>
  </tbody>
</table>

<script>
function adjustSVGWidths() {
  const table = document.querySelector('table');
  if (!table) return;

  const tableRect = table.getBoundingClientRect();
  const containerWidth = tableRect.width;
  const svgs = document.querySelectorAll('table svg');

  // 1. 提取每个 SVG 的原始 viewBox 宽度（作为“基准尺寸”）
  const svgData = Array.from(svgs).map(svg => {
    const vb = svg.getAttribute('viewBox');
    const width = vb ? parseFloat(vb.split(' ')[2]) : 0;
    return { element: svg, baseWidth: width };
  }).filter(item => item.baseWidth > 0);

  if (svgData.length === 0) return;

  const totalBaseWidth = svgData.reduce((sum, item) => sum + item.baseWidth, 0);

  // 2. 若总基准宽 ≤ 容器宽 → 保持原始比例，不强制缩放（由 CSS max-width 自然控制）
  //    否则 → 按比例缩放到容器宽度
  if (totalBaseWidth <= containerWidth) {
    svgData.forEach(item => item.element.removeAttribute('width'));
  } else {
    const scale = containerWidth / totalBaseWidth;
    svgData.forEach(item => {
      const newWidth = Math.round(item.baseWidth * scale);
      item.element.setAttribute('width', `${newWidth}px`);
    });
  }
}

// 初始化 + 响应窗口变化
window.addEventListener('load', adjustSVGWidths);
window.addEventListener('resize', () => requestAnimationFrame(adjustSVGWidths));
</script>

</body>
</html>

⚠️ 注意事项与最佳实践

• viewBox 是关键：务必为每个 <svg> 正确设置 viewBox="0 0 [width] [height]"，其数值代表原始设计尺寸，JS 将据此计算缩放比例；
• 避免混用 width/height 属性与 CSS 尺寸：若已用 style.width 或内联 width="..."，可能干扰 JS 计算；建议统一由 JS 控制 width 属性，CSS 仅负责 max-width 和布局约束；
• 兼容表格混合内容：本方案不影响 <td> 内其他元素（如文本、按钮等），因 SVG 单独占据块级空间，且 table-layout: fixed 可保障列宽由内容或 CSS 显式控制；
• 性能优化：使用 requestAnimationFrame 包裹 resize 回调，防止高频重排；
• 无障碍补充：为 <svg> 添加 role="img" 和 <title> 可提升可访问性。

该方案兼顾语义清晰性、浏览器兼容性（支持 IE11+）与实际工程健壮性，是解决“表格内多 SVG 等比自适应”问题的可靠路径。