IE9-11 SVG ширина не 100% и jQuery Animation не работает правильно

0

Анимация Проблема:

Chrome & Firefox работает
IE9-11: анимация работает неправильно:/

myArray содержит идентификатор зданий, а тасовка - только для рандомизации сортировки

 var skyline = Snap.select("#skylines");
 var bottles = [
        "Flasche1",
        "Flasche2",
        "Flasche3",
        "Flasche4"
    ];

 $("#drink").click(function () {
        hideBuildings(allBuildings);
        startBuildings(bottles);
        $('.main').moveTo(3); //Onepage Scroll
    });


 function hideBuildings(myArray) {
        for (var i = 0; i < myArray.length; i = i + 1) {
            $('#' + myArray[i]).css({opacity: 0 });
            slideDown(myArray[i]);

        }
    }
/*
 * Slide Down
 */
function slideDown(el) {
    var cuel = skyline.select("#" + el);
//the height of a building
    var a = cuel.getBBox().height;
    cuel.animate({
        transform: "t0, t" + a
    }, 600);

}



function startBuildings(myArray) {
        var myArray = shuffleArray(myArray);
        for (var i = 0; i < myArray.length; i = i + 1) {
            $('#' + myArray[i]).css({opacity: 1});
            slideUp(myArray[i], 0, randomFromInterval(1470, 2000));
        }
    }

//Slide Up
function slideUp(el, y, duration) {
        var cuel = skyline.select("#" + el);
        cuel.animate({
            transform: "t0, t" + -y,
            opacity: 1

        }, duration, mina.bounce);


    }

Проблема SVG:

SVG выглядит правильно в Firefox и Chrome, но не в IE11 я хочу 100% ширину, но не работает в IE9-11

Открытый тег SVG:

<svg id="skylines"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="703px"
preserveAspectRatio="xMinYMin"  height="123.365px" viewBox="0 0 703 123.365" enable-background="new 0 0 703 123.365" xml:space="preserve">

CSS:

.skyline-wrapper svg {
  height: 100%;
  width: 100%;
  display: block;
}

Я не могу точно описать обе проблемы, потому что я понятия не имею, откуда они

Ссылка http://swisslayer.ch/drink/splash.html нажмите "JA" спасибо привет из Швейцарии

  • 0
    попробуйте добавить это правило .skyline-wrapper {width: 100%;}, потому что я не нахожу стили для этого элемента и не изменяю этот .skyline-wrapper svg {height: auto;}
  • 0
    спасибо, но тот же результат; /
Показать ещё 15 комментариев
Теги:
svg
debugging
animation
cross-browser

1 ответ

0
Лучший ответ

Разница между 100% кросс-браузерным рендерингом - xml:space. К сожалению:

Атрибут xml: space не поддерживается в SVG.

Используйте нормализатор или XSLTPпроцессор для нормализации пробелов.

Рекомендации

Ещё вопросы

Сообщество Overcoder
Наверх
Меню