0

RaphaelJS + SVG を使用していますが、レスポンシブ バージョンではうまくいきません。

写真と、その一部 (上部と下部) をカバーする 2 つの 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 は、囲まれた div の 100% の高さに SVG を引き伸ばしています
  • Chrome > svg を div 全体に広げて中央に配置するため、svg を上部または下部に配置することはできません。

他の誰かがそのような問題を抱えていましたか？それを修正する方法を知っていますか？

ありがとう

表示イメージ

4

1 に答える 1

1

このページのコードの助けを借りて: http://www.brichards.co.uk/blog/webkit-svg-height-bug-workaround 問題を解決できました! イッピーイ

ここで修正された jsfiddle を参照してください 。

次の 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 に答える