使用 Snap for IE 10+ 翻转 SVG

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, I used GASP 库。
这有点棘手！这个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

Flipping an SVG using Snap for IE 10+

jquery

css

svg

snap.svg