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 отзывчивым, который работает.

Проблемы в разных браузерах: (чтобы увидеть, как это выглядит в разных браузерах, см. Фотографии) Я даю divs (который я добавляю svg для) абсолютной позиции и помещаю их в либо сверху: 0 или внизу: 0 на их позиции

• Firefox отлично работает!
• Safari растягивает svg до 100% высоты окружения div
• Chrome> невозможно установить 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(); });