0

我正在使用 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 > 无法将 svg 放在顶部或底部，因为它们会延伸到整个 div 并居中。

有没有其他人遇到过这样的问题？你知道怎么解决吗？

谢谢

其显示方式的图像

4

1 回答 1

1

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

在此处查看我的固定 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(); });
于 2013-05-15T11:36:38.453 回答