使用 Snap for IE 10+ 翻转 SVG答案

【问题标题】：Flipping an SVG using Snap for IE 10+使用 Snap for IE 10+ 翻转 SVG
【发布时间】：2017-01-11 01:53:09
【问题描述】：

我有以下代码，它有一个 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 之类的？

【问题讨论】：

标签： jquery css svg snap.svg

【解决方案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>

【讨论】：