如何使用CSS缩放SVG宽度？

Question

我正在使用Google的Charts js库。 它工作得很好，并为我们的数据制作了极好的图表。

不幸的是，由于它的创建方式，它没有响应，所以如果屏幕尺寸发生变化，它就不会改变以匹配。 我通过设置为window.onresize的redraw功能解决了这个问题，因此修复了。

似乎打印不被视为调整大小事件，因此不会调用重绘。 我有一个仅打印的css成型页面的其余部分在打印时看起来很棒，但图表保持与浏览器窗口中相同的大小。 我可以使窗口更小，并且打印而不会搞砸页面缩放，但这不是一个真正的解决方案。

我努力了：

将svg{width:100%;}到print.css中 - 没有好处

我没试过：

使图表成为一个可以很好地打印的设置大小 - 这看起来像是一个黑客，如果可能的话我宁愿不这样做。

编辑

一个修改：Google Charts API将svg创建为<div>的<svg> <div> 。 它不是背景图像。

Answer 1

这是推荐：

和我的解决方案：

经过一些反复试验，这就是我发现的。

添加（到原始CSS）：

html {
   height: 100%
}

在原始规格中提供了我正在寻找的内容。

另外，如果我想让图像在裁剪时成为中心，我可以使用：

html {
    background: url(path/to/image.jpg) no-repeat center center fixed;
    background-size: cover;
}

最后，如果我希望它居中，总是保持纵横比，但不要裁剪（即，一些空格是好的）然后我可以做：

body {
  background: url(/path/to/image.svg) no-repeat center center fixed;
  background-size: contain;
}