javascript - 如何使用 CSS 缩放 SVG 宽度？

Question

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

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

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

我努力了：

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

我没有试过：

将图表设置为可以很好地打印的固定大小 - 这似乎是一个 hack，如果可能的话，我宁愿不这样做。

编辑

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

score 1 · Accepted Answer

这是一个参考：

和我的解决方案：

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

添加（到原始 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;
}

1 回答 1