Svg 溢出容器高度，设置为 h-full/100%-解网

问：

我正在使用 react、d3js 和 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>

我必须保持屏幕尺寸，不允许溢出。问题是，eveything 保持在屏幕尺寸内，但是当我添加 SVG 时，它总是溢出。我添加了 h-full、w-full 和 preserveAspectRatio=“none”（并尝试了另一个将其保留为正方形）遵循我发现的其他解决方案（在这种情况下不成功）。

有没有办法（css/js）将该 svg 保留在 div 中？填充其父 div 的 100%，并且不会溢出。如果是这样，有没有办法在考虑到不断变化的宽度和大小的情况下保持原始的 aspectRatio？我感谢任何帮助......让那个东西有响应性是一个令人头疼的问题

编辑：

我用稍深的颜色填充了 bg，正如你所看到的那样，svg 在 100vh 和 100vw 之外。

JavaScript HTML CSS 反应JS SVG

Svg 溢出容器高度，设置为 h-full/100%

Svg is overflowing container height which is set to h-full/100%

评论