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

Question

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

我遇到的问题是缩放图表。它们看起来像这样：

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

它们是使用 pygal 生成的 svg 文件，我通过在 pygal 中强制设置大小来实现第二张图像，但它并不优雅，并且在屏幕大小更改时失败。

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

Answer 1

您的图表应该加载到两个不同的 div 中，以便您可以width为每个设置不同的样式，具体取决于基于视图的 css 类（如colTwitter Bootstrap 中的基于类）。如果您加载动态 svg（在 Pygal 中没有任何explicit_size设置），您应该能够处理不同的窗口大小。