如何使用CSS缩放SVG宽度？

Question

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

不幸的是,由于它的创建方式,它没有响应,所以如果屏幕尺寸发生变化,它就不会改变以匹配.我通过redraw设置的函数解决了那个window.onresize,所以这是固定的.

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

我试过了:

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

我没试过:

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

编辑

一个修改:Google Charts API将svg创建为<svg>a <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;
}