IE9-11 SVG宽度不是100%，jQuery动画不能正常工作。

Question

动画问题：

Chrome和Firefox工作

IE9-11:动画工作不正确:/

myArray包含建筑物ID，而洗牌只用于随机排序

 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在火狐和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“来自瑞士的问候

Answer 1

100%跨浏览器呈现之间的区别是xml:space。不幸的是：

SVG不支持xml:space属性。

使用增白剂或XSLTProcessor来规范空白。

参考资料

• MS:2.1.1 [SVG11]第5.10.2节，xml:lang和xml:space属性
• 在HTML5时代使用客户端XSLT转换
• 原生XML对象类型和旧网站