React+D3+Zoom-Pan-Pinch场景下SVG溢出容器问题求助

我正在使用React、D3.js和zoom-pan-pinch工具，以下是复现问题的简化代码（可完整复现完整版代码中遇到的问题）：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  
<html>
<body>
<div id="root">
       <div id="main" class="bg-zinc-100 h-screen w-screen px-8 pb-4 flex flex-col">
          <div class="w-full flex flex-row h-12 justify-between items-center py-8">
             <img src="" class="h-6" alt="img here">text
             <div class="pl-2 w-20 h-10 rounded-full bg-white flex flex-row justify-around items-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-6">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
                </svg>
                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="avatar">
             </div>
          </div>
          <div id="workspace" class="flex flex-row gap-6 h-full">
             <svg viewBox="0 0 105 93" xmlns="http://www.w3.org/2000/svg" class="h-full w-full" preserveAspectRatio="none">
                <path d="M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z" fill="#ED1C24"></path>
             </svg>
          </div>
       </div>
    </div>
</body>
</html>

要求严格保持屏幕尺寸，不允许出现溢出。目前其他元素均能适配屏幕，但添加SVG后始终溢出容器。已尝试为SVG设置h-full、w-full及preserveAspectRatio="none"（也尝试过其他值以保持正方形）等方案，但均未解决问题。

需要解决：

• 让SVG完全适配父容器，填充100%空间且不溢出
• 若可行，尺寸变化时保留SVG原比例

补充截图：

1. 修正容器布局约束 #

父容器#main用h-screen加内边距会让总高度超出屏幕，#workspace的gap-6也会占用额外空间，导致SVG可用空间被压缩后仍试图填满原容器，引发溢出。调整如下：

• 给#main替换h-screen为min-h-screen，添加overflow-hidden强制隐藏溢出
• 移除#workspace的gap-6（无需间隙时），避免额外空间占用

修改后的容器类：

<div id="main" class="bg-zinc-100 min-h-screen w-screen px-8 pb-4 flex flex-col overflow-hidden">
<!-- ... -->
<div id="workspace" class="flex flex-row h-full">

2. 正确配置SVG的preserveAspectRatio #

• 要保留SVG原比例（105:93≈1.13:1）：使用preserveAspectRatio="xMidYMid meet"（默认值），SVG会保持比例完全适配容器，不会溢出；若要填充整个容器，超出部分裁剪，改用preserveAspectRatio="xMidYMid slice"
• 不需要比例强制拉伸：保留preserveAspectRatio="none"，但需确保容器尺寸逻辑正确

3. 强制SVG尺寸约束 #

给SVG添加max-h-full和max-w-full，配合h-full w-full，确保SVG不会超出容器边界：

<svg viewBox="0 0 105 93" xmlns="http://www.w3.org/2000/svg" class="h-full w-full max-h-full max-w-full" preserveAspectRatio="xMidYMid meet">

4. React+D3动态适配（可选） #

结合zoom-pan-pinch工具时，可监听容器尺寸变化，动态调整SVG缩放比例：

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    const svg = d3.select('#workspace svg');
    // 计算适配比例
    const svgRatio = 105 / 93;
    const containerRatio = width / height;
    const scale = containerRatio > svgRatio ? height / 93 : width / 105;
    // 应用缩放
    svg.attr('transform', `scale(${scale})`);
  }
});
resizeObserver.observe(document.getElementById('workspace'));

最终修正后的完整代码片段 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  
<html>
<body>
<div id="root">
       <div id="main" class="bg-zinc-100 min-h-screen w-screen px-8 pb-4 flex flex-col overflow-hidden">
          <div class="w-full flex flex-row h-12 justify-between items-center py-8">
             <img src="" class="h-6" alt="img here">text
             <div class="pl-2 w-20 h-10 rounded-full bg-white flex flex-row justify-around items-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-6">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
                </svg>
                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="avatar">
             </div>
          </div>
          <div id="workspace" class="flex flex-row h-full">
             <svg viewBox="0 0 105 93" xmlns="http://www.w3.org/2000/svg" class="h-full w-full max-h-full max-w-full" preserveAspectRatio="xMidYMid meet">
                <path d="M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z" fill="#ED1C24"></path>
             </svg>
          </div>
       </div>
    </div>
</body>
</html>

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