Question

我无法使SVG响应。我已经尝试过为这个问题提供的解决方案（Resize svg when window is resized in d3.js），但它对我不起作用。无论设置如何，SVG似乎都保持其宽高比。（我发布在earlier上。一旦我解决了问题，我会删除这个问题。）

上下文：这是针对作为Electron桌面应用程序运行的全屏D3时间轴。我已经删除了所有内容，以便提供问题的实例。下面的图片来自Electron app，但浏览器中的行为是相同的：SVG只按比例缩放，如果窗口的宽高比与SVG的宽高比不匹配则会被裁剪。

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

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

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

1024 x 768窗口大小

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

Answer 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 - 红色，绿色和缩放时间线来填充它们之间的部分。

响应SVG无法正常工作？

1 个答案: