javascript - 响应式网页 : SVG visualization?

标签 javascript svg media-queries responsive-design modernizr

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

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

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

关于 1:

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

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

关于 2:

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

enter image description here

最佳答案

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 发送到客户端

关于javascript - 响应式网页 : SVG visualization?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10636920/

相关文章:

c# - MVC ASP & Javascript 变量共享

javascript - 如何使用 clearInterval() 和 location.reload()?

ruby-on-rails - Ruby on Rails 中的图像转换 svg

javascript - 如何将自定义 SVG 图标添加到本地 fontawesome 库 (fontawesome-all.js)?

css - Sass Mixin 使用 SVG 作为背景并改变颜色

jquery - 我需要一种使用 jquery 检测 CSS3 媒体查询支持的简单方法

css - 在 CSS 中嵌套 @media 规则

javascript - OpenLayers 中特征属性的深度克隆

javascript - 拖放上传图片文件大小限制

html - 在 Grid 960 中创建和控制父 div 的嵌套