响应式布局：调整 SVG 大小以填充其父级的剩余空间

Posted 2023-03-06

【中文标题】响应式布局：调整 SVG 大小以填充其父级的剩余空间

【英文标题】：Responsive layout: Adjust SVG size to fill the remaining space of its parent

【发布时间】：2016-04-23 03:31:02

【问题描述】：

关于如何在页面中调整或缩放 SVG 元素已经存在很多问题，但没有一个解决了调整 SVG 大小以使其完全填充其父级中的 剩余 可用空间的问题 - a <div> 和 id="content" 已经包含一些 paragraphs（或其他元素）。

目标平台包括桌面浏览器和移动应用（使用Cordova以防万一）。

我正在使用D3.js 来绘制 SVG 内容，所以我不想使用 SVG viewBox 属性（在 this answer 中有很好的解释），因为这也会缩放我想要的笔画宽度喜欢直接在 CSS/javascript 控制下。

这是我目前所拥有的： http://codepen.io/friendfx/pen/OMxYrL

这在现代桌面浏览器中运行良好，但存在以下问题：

当减小窗口大小以使 SVG 元素的宽度小于 300 像素或高度小于 150 像素（我没有指定但似乎是某种“默认 SVG 大小”）时，布局开始分崩离析在 Chrome 和 IE 中以及（在较小程度上 Firefox 似乎只有 150px 高度有问题）。 只要body 的flex-direction 是row，IE 就不想换行第一个（长）段落。 在 android 上，SVG 元素的高度似乎总是等于 WebView 的高度，而与 <svg> 之前的两个 <p> 元素占用的垂直空间无关。

虽然我可能会忽略问题 1 和 2，但第三个问题是一个杀手，因为我不想要任何滚动。

阅读 SVG Specification on intrinsic sizing 后，我想知道 WebView 的行为是否实际上最接近规范，因为它使 SVG（至少垂直）增长到 SVG viewport 的大小（我认为这是大小WebView/浏览器窗口）。

是否有一种相当干净的方法来解决（至少）问题 3？

顺便说一句，上面代码中的here is a fork 我刚刚用<p> 替换了<svg> 元素，并且它在所有浏览器和 Android WebView 上都能完美运行。

【问题讨论】：

这就是你想要的吗？ codepen.io/Mi_Creativity/pen/OMxKMx

是的，看来我已经覆盖了你的笔，抱歉，基本上我将这个 width:100%; 添加到 svg css，因为当我水平或垂直调整窗口大小时出现故障

@Mi-Creativity：啊，我看到了不同之处——现在我得到了你的代码。虽然 Chrome 中的行为略有改善，但不幸的是它在 Android 上的行为完全相同 - SVG 的高度大于 #content 中的可用空间，导致垂直滚动。

当然300 x 150 is specified，我们不只是捏造你知道的！

@RobertLongson：有趣的阅读，谢谢。我希望它被写成代码——我认为它会更容易理解。另外我不太确定该规范的哪一部分适用于我的案例？

【参考方案1】：

通过反复试验并遵循 Mi-Creativity's comment 的使用 width: 100%，我将 SVG 元素的样式设置如下：

svg 
  border: 1px solid #0E0;
  flex-grow: 1;
  width: 100%;
  height: 100%;

这是 Codepen 上的完整示例： https://codepen.io/friendfx/pen/RrjpeL

SVG 元素仍然没有缩小到其神秘的最小尺寸限制 300 像素 * 150 像素以下，但我现在可以忍受。