使用susy

Question

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

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

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

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

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

Answer 1

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