如何使RaphaelJS圖形使用流體佈局

由於IE8，我使用RaphaelJS在所有現代瀏覽器（例如Chrome，FireFox，Safari，IE9 +）中生成的圖形將爲SVG，但在IE8中將爲VML。如何使RaphaelJS圖形使用流體佈局

此圖形嵌入<div>內，該圖形是使用流體佈局的頁面的一部分。使用純粹的SVG，我可以使用像viewBox和preserveAspectRatio這樣的屬性使其工作，也就是說，隨着瀏覽器窗口調整大小，圖形（以及內部元素）會上下縮放。

但是它如何與VML案件一起工作？我是否需要通過在窗口大小調整事件中重新繪製整個圖形來展示自己的圖形？ RaphaelJS有沒有方法可以簡化這種情況？

來源

2012-11-30 MLister

Paper.setViewBox應該處理VML以及SVG AFAIK。

這就是說，我不確定VML如何處理流體佈局。

來源

2012-11-30 15:16:31

我什麼時候調用'setViewBox'？我在創建圖表後嘗試調用它，但是當我調整瀏覽器窗口大小時，沒有任何反應 - 圖表保持相同的大小（請注意，我正在使用Chrome中的「SVG」圖形）。 – MLister

對於您可以設置以百分比，這將使圖像「流體」自動（它將與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%'); 
    }

來源

2012-12-02 13:02:45 oyatek

如何使RaphaelJS圖形使用流體佈局

回答

相關問題