Анимация Проблема:
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" спасибо привет из Швейцарии
Разница между 100% кросс-браузерным рендерингом - xml:space
. К сожалению:
Атрибут xml: space не поддерживается в SVG.
Используйте нормализатор или XSLTPпроцессор для нормализации пробелов.
Рекомендации