Question

我有以下代码，它有一个SVG多边形，并使用CSS3动画来翻转它。这在非IE浏览器中工作正常。

<body>

    <style>



        .front
        {
            animation-duration: 3s;
            animation-name: flipin;
            animation-iteration-count: 1;
        }

        @keyframes flipin
        {
            from
            {
                transform-origin: 300px 286.5px;
                transform: rotateX(0deg);
            }

            to
            {
                transform-origin: 300px 286.5px;
                transform: rotateX(360deg);
            }
        }

    </style>

    <div class="click panel circle">
        <svg height="600" width="600" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: gray;" class="">


            <polygon points="200,286 250,200 350,200 400,286 350,373 250,373" fill="green" transform="" id="polygon-front" class="front" />

        </svg>
    </div>

</body>

有没有办法在IE 10+中使用Snap或其他东西？

Answer 1

这是Demo，我使用了GASP lib。
这有点棘手！这个video有更多解释。

        <polygon points="200,286 250,200 350,200 400,286 350,373 250,373" fill="green" transform="" id="polygon-front" class="front" />

    </svg>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script>

    var tl = new TimelineMax();

    tl.set("#polygon-front", {
        transformOrigin: "center"
    });

    tl.from("#polygon-front", 1, {scaleY: 1})
        .to("#polygon-front", 1, {scaleY: 0});

    // controls **

    tl.yoyo(1);
    tl.repeatDelay(0)
    tl.repeat(1);
    tl.timeScale(2); // to speed up the animation , normal value is  1


</script>

使用Snap for IE 10+翻转SVG

1 个答案: