如何使RaphaelJS图形与流体布局一起工作

Question

由于IE8，我使用RaphaelJS在所有现代浏览器（例如Chrome，FireFox，Safari，IE9 +）中生成SVG的图形，但在IE8中将为VML。

此图表嵌入<div>内，SVG是使用流体布局的页面的一部分。使用纯viewBox，我可以使用preserveAspectRatio和VML等属性来使其工作，也就是说，图形（以及其中的元素）随着浏览器窗口的大小调整而向上和向下缩放。

但它如何与{{1}}案件一起使用？我是否需要在窗口调整大小事件时重新绘制整个图形来自行滚动？ RaphaelJS有什么方法可以简化这种情况吗？

Answer 1

Paper.setViewBox应该为VML和SVG AFAIK处理此问题。

那就是说，我不确定VML处理流体布局的效果如何。

Answer 2

对于所有优秀的浏览器，您可以设置宽度/高度百分比，这将使图像自动“流畅”（它将使用DIV容器调整大小），对于IE7-8，您应该使用自定义调整大小功能paper.setViewBox()手动：

  if($.browser.msie && $.browser.version < 9){
       R = Raphael('divID', 640, 480);
       $(window).on('resize', yourCustomfluidResizeFunction);
  }else{
       R = Raphael('divID', '100%', '100%');
  }