响应式 SVG 无法正常工作？答案

【问题标题】：Responsive SVG not working correctly?响应式 SVG 无法正常工作？
【发布时间】：2017-12-14 16:02:47
【问题描述】：

我在制作 SVG 响应时遇到了问题。我已经尝试过为这个问题提供的解决方案（Resize svg when window is resized in d3.js），但它对我不起作用。无论设置如何，SVG 似乎都保持其纵横比。（我在earlier 上发帖。我会在解决问题后删除该问题）。

上下文：这适用于作为 Electron 桌面应用程序运行的全屏 D3 时间线。我已经剥离了所有内容以提供该问题的工作示例。下面的图片来自 Electron 应用，但在浏览器中的行为是相同的：SVG 仅按比例缩放，如果窗口的纵横比与 SVG 的纵横比不匹配，则会被裁剪。

我想要发生的事情：理想情况下，我希望“弹性空间”位于垂直尺寸中，以便 SVG 大小适合窗口的宽度并缩放高度适合。

这是working, editable bl.ock 和same block full page

我仍在学习 JS 和 d3 - 添加 CSS 来处理响应性变得非常混乱，因此非常感谢任何帮助。

1024 x 768 窗口大小

1400 x 900 屏幕尺寸：SVG 被裁剪

【问题讨论】：

标签： javascript d3.js svg electron

【解决方案1】：

你可以使用

preserveAspectRatio="none"

但我怀疑这可能不是您想要的，因为它会拉伸 SVG 的内容。

body {
  margin: 0;
  padding: 0;
}

.svg-container {
  width: 100vw;
  height: 100vh;
  background-color: #ffff00;
}

.svg-content-responsive {
  display: block;
  background-color: #0000ff;
}

<div id="container" class="svg-container">

  <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 984 728"
       class="svg-content-responsive" overflow="hidden">
    <rect x="20" y="20" width="944" height="50" style="fill: rgb(255, 0, 0);"></rect>
    <rect x="20" y="658" width="944" height="50" style="fill: rgb(0, 255, 0);"></rect>
  </svg>
  
</div>

Fiddle version

SVG 不能具有与父级不同的缩放比例。因此，如果您不喜欢拉伸，那么您应该考虑使用三个单独的 SVG - 红色、绿色和缩放的时间线以填充它们之间的部分。

【讨论】：