Question

动画问题：

Chrome＆amp; Firefox的工作原理 IE9-11：动画效果不正确：/

myArray包含建筑物ID，而shuffle仅用于随机化排序

 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 Open标签：

<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来规范化空白。

<强>参考

IE9-11 SVG宽度不是100％，jQuery Animation无法正常工作

1 个答案: