Raphael - 响应式SVG - 与不同浏览器的问题

Question

我正在使用RaphaelJS + SVG但是没有使用响应版本。

我有一张图片和两个SVG的叠加层来覆盖它的一部分（在顶部和底部）。在我的jsfiddle：http://jsfiddle.net/karo/kgQqh/3/中，您可以看到代码 这里是JS：

var paperBanner1Bottom = Raphael("banner1_bottom", '100%', '100%');  
 paperBanner1Bottom.path("M0,250V30.07c0,0,260.135,133.59,668.494,150.29c408.351,16.701,660.351,16.701,754.47,16.701c94.121,0,296.577,3.74,377.036,41.689V250H0z").attr({fill:"red", "stroke-width":"0"})
paperBanner1Bottom.setViewBox(0, 0, 1800, 250, true);

var paperBanner1Top = Raphael("banner1_top", '100%', '100%');
paperBanner1Top.path("M0,0v34.96c0,0,182.39,95,480.3,88.16c273.58-6.28,597.33-63.84,775.16-89.68c177.84-25.84,320.7-47.12,545.66,19.76c0-25.84,0-53.2,0-53.2H0z").attr({fill:"red", "stroke-width":"0"});
paperBanner1Top.setViewBox(0, 0, 1800, 140, true);

我正在使用setviewbox来获取响应的svgs。

不同浏览器中的问题:(看看它在不同浏览器中的样子看图片） 我给div（我正在添加svg）绝对位置并将它们放在top：0或bottom：0位置

• Firefox完美无缺！
• Safari正在将svg拉伸到包围div的100％高度
• Chrome＆gt;将svgs放在顶部或底部是不可能的，因为它们会在整个div上展开并以此为中心。

有没有其他人有这样的问题？ 你知道如何解决这个问题吗？

由于

Answer 1

借助此页面的代码：http://www.brichards.co.uk/blog/webkit-svg-height-bug-workaround 我可以解决问题！ Yippiiii

在此处查看我的固定jsfiddle：http://jsfiddle.net/karo/kgQqh/16/embedded/result/ 可能你可以使代码更短的函数fixWebkitHightBug，但我在jquery中还不是很好;）

以下Javascript / JQuery代码修复了该问题。

function fixWebkitHeightBug(){ 
/* Resize campus element */ 
var campusW = 282; 
var campusH = 288; 
var curCampusW = $('#campus').width(); 
var newCampusH = heightInRatio(campusH,campusW,curCampusW); 
$('#campus').height(newCampusH); 
function heightInRatio(oH,oW,nW){ return (oH / oW * nW); } 

}

$(window).resize(function() { fixWebkitHeightBug(); }); 
$(document).ready(function() { fixWebkitHeightBug(); });