本文介绍一种结合 CSS 与 JavaScript 的方案，使嵌入 <table> 中的多个 <svg> 元素既能按原始比例自动撑开表格宽度，又能在容器空间不足时等比缩放以适配屏幕，同时兼容表格内其他内容。

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

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

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

下载

` 中的多个 `

在 HTML 表格中嵌入 SVG 并实现智能尺寸适配，单纯依赖 CSS 是有限的——因为 <svg> 的 viewBox 定义了坐标系统，但其渲染尺寸仍受外部布局上下文影响；而 <table> 的默认行为（如 table-layout: auto）会使单元格宽度由内容决定，难以精确控制 SVG 的缩放比例。因此，需采用 CSS 基础约束 + JavaScript 动态计算 的协同策略。

✅ 核心思路

• CSS 层：确保 SVG 可响应式缩放，避免硬编码宽高破坏比例；
• JS 层：动态获取 SVG 原始逻辑宽度（基于 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%;
      max-width: 100%;
      table-layout: fixed; /* 关键：启用固定列宽计算 */
      border-collapse: collapse;
      margin: 0 auto;
    }
    td {
      padding: 0;
      vertical-align: top;
    }
    svg {
      display: block;
      width: 100%;     /* 让 SVG 填满单元格宽度（为 JS 调整预留基础） */
      height: auto;    /* 保持宽高比 */
      max-width: none; /* 防止 CSS max-width 干扰 JS 精确控制 */
    }
  </style>
</head>
<body>

<table>
  <tbody>
    <tr>
      <td>
        <svg viewBox="0 0 1000 500">
          <image href="/my_image1.png" width="1000" height="500"/>
          <rect x="10" y="10" width="80" height="80" fill="rgba(255,0,0,0.3)"/>
        </svg>
      </td>
      <td>
        <svg viewBox="0 0 800 400">
          <image href="/my_image2.png" width="800" height="400"/>
          <circle cx="400" cy="200" r="60" fill="rgba(0,0,255,0.3)"/>
        </svg>
      </td>
    </tr>
  </tbody>
</table>

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

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

  // 提取各 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, originalWidth: width };
  }).filter(item => item.originalWidth > 0);

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

  const totalOriginalWidth = svgData.reduce((sum, item) => sum + item.originalWidth, 0);

  // 若总原始宽度 ≤ 可用宽度：保持原始比例，让表格自然收缩（依赖 table-layout: fixed + width: 100%）
  // 若超出：按比例缩放每个 SVG 的 width 属性
  if (totalOriginalWidth > availableWidth) {
    svgData.forEach(({ element, originalWidth }) => {
      const scaledWidth = (originalWidth / totalOriginalWidth) * availableWidth;
      element.setAttribute('width', `${scaledWidth}px`);
    });
  } else {
    // 恢复为 auto 或移除 width 属性，交由 CSS width: 100% 自动分配（此时表格会收缩至内容总宽）
    svgData.forEach(({ element }) => {
      element.removeAttribute('width');
    });
  }
}

// 初始化 + 响应式监听
window.addEventListener('load', resizeSVGsInTable);
window.addEventListener('resize', () => {
  // 使用 requestAnimationFrame 避免重复触发
  requestAnimationFrame(resizeSVGsInTable);
});
</script>

</body>
</html>

⚠ 注意事项与最佳实践

• viewBox 必须准确：它是计算缩放比例的唯一可靠依据，务必与 <image> 实际尺寸一致；
• 避免设置 width/height 属性（除非 JS 控制）：直接写在 HTML 中会覆盖 CSS 响应式行为，干扰 JS 计算；
• table-layout: fixed 是关键：它使表格列宽由第一行单元格决定，配合 width: 100% 和 svg { width: 100% }，可让 SVG 占满分配后的列宽；
• 兼容混合内容：本方案不限制 <td> 内仅含 SVG；若存在文字或其他元素，建议用 flex 或 grid 布局替代表格，或对非 SVG 内容设置 min-width: 0 防止挤压；
• 性能优化：使用 requestAnimationFrame 包裹 resize 回调，避免频繁重排重绘。

该方案已在现代浏览器（Chrome/Firefox/Safari/Edge）中验证有效，兼顾语义清晰性、可维护性与跨设备适配能力，是处理多 SVG 表格布局的稳健选择。