javascript - 响应式网页 : SVG visualization?

Question

我正在构建交互式 SVG 可视化(见图片)并希望提供:

1) 适应较小的屏幕尺寸(媒体查询？)

2) 禁用 JavaScript 时的良好回退(Modernizr？)

关于 1:

您认为使用固定/离散像素宽度更好还是我应该让 SVG block 适应可用宽度？

我是否需要一个窗口大小调整监听器来动态更新布局，或者在使用媒体查询时是不是太过分了？

关于 2:

保持设计响应，用静态图像替换 SVG 可视化的好方法是什么？

Answer 1

Do you think it is better to work with fixed/discrete pixel widths or should I just have the SVG block adapt to the available width?

缩放是矢量图形的主要优势，为什么不呢？

Do I need a window resize listener to dynamically update the layout or is that overkill when using media queries?

没有

Keeping the design responsive, what would be a good way of replacing the SVG visualization with static images?

转换JSON data source to XML , 生成 SVG using XSLT在服务器上，然后将静态 SVG 发送到客户端