css - 使用 susy 在网页中缩放 pygal svg 图形

Question

我试图在网页中并排放置两个 svg 文件。我已经使用 susy 创建了跨度，第一个是 2 列宽，第二个是 10 列。我在第一个跨度中放置了一个窄条形图，在第二个跨度中放置了一个宽线图。

我遇到的问题是缩放图形。他们看起来像这样:

但我希望它们看起来更像这样:

它们是用 pygal 生成的 svg 文件，我通过在 pygal 中强制调整大小获得了第二个图像，但它并不优雅，并且在屏幕大小更改时失败。

如何使 svg 条形图在不缩放宽度的情况下缩放高度，并在网络浏览器中动态执行，而不是在 pygal 中手动更改大小？我也无法手动编辑 svg 文件，因为它们是通过另一个系统生成的并且经常更新。

Answer 1

你的图表应该在两个不同的 div 中加载，这样你就可以为每个设置不同的 width 样式，这取决于基于 View 的 css 类(比如基于 col Twitter Bootstrap 中的类)。如果您加载动态 svg(在 Pygal 中没有任何 explicit_size 设置)，您应该能够处理不同的窗口大小。