Question

关于如何在页面中调整SVG元素的大小或缩放有很多问题，但是没有一个问题涉及调整SVG的大小，因此它完全填充了其父级中剩余的可用空间 - a <div> id="content" p已包含一些viewBox aragraphs（或其他元素）。

目标平台包括桌面浏览器和移动应用（如果重要，请使用Cordova。）

我正在使用D3.js来绘制SVG内容，因此我不想使用SVG body属性（在this answer中很好地解释），因为这也会扩展在CSS / JavaScript直接控制下我想要的笔画宽度。

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

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

当缩小窗口大小使得SVG元素的宽度应小于300px或高度为150px时（我没有指定但似乎是某种“默认SVG大小”），布局开始分崩离析在Chrome和IE浏览器中（在较小程度上，Firefox似乎只有150px高度的问题）。
只要flex-direction row <p>为<svg>，IE就不想包装第一个（长）段。
在Android上，SVG元素的高度似乎总是等于WebView的高度，而不管<svg>之前两个<p>元素占用的垂直空间。

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

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

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

顺便说一下，上面代码中的here is a fork，我刚刚将NOT IN元素替换为NOT EXISTS，并且在所有浏览器和中都能很好地工作Android WebView。

Answer 1

通过反复试验以及使用width: 100%的{{3}}后，我将SVG元素设置如下：

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

以下是Codepen的完整示例： Mi-Creativity's comment

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