Question

所以我理解在IE中不支持SVG动画，我让它为其他一切工作但是碰到一个砖墙让圆形条移动到IE所以现在考虑使用JS（jQuery）夹具或使用SVG Lib的更糟糕的情况像拉斐尔一样。如果有人知道如何编写一些自定义JS来解决这个问题，我宁愿通过各种手段但更糟糕的情况需要加载Raphael lib然后我想会做但如果案例是使用Lib可能有人可能帮我做JS （jQuery）使它与Lib一起使用，因为我不确定如何根据我在下面设置的SVG路径来做到这一点：

JSFiddle：http://jsfiddle.net/0pkqk5r0/1/

HTML：

<div id="loader">
    <svg height="80" width="80" viewBox="-10 -10 220 220">
        <path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FF1251" stroke="#FF1251" stroke-width="20" />
        <path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
    </svg>
    <div id="circle"></div>
</div>

我认为需要使用JS或lib

为IE工作

<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />

Lib URL如果需要：http://raphaeljs.com/，我想一个很好的例子就是时钟演示（不看是否使用相同的SVG方法即时使用）

我之前提到过Lib，因为它目前到目前为止已经遇到过，但请随意告诉其他人将解决这个问题或更好的解决方案：）

正如我所说的那样，它在FF，Safari，Chrome中都很可爱，但IE只是不想动画边缘的进展。如果您查看任何其他浏览器或JSFiddle，您将看到它应该如何。要查看动画，您需要单击圆圈才能启动它。

CSS如果需要：

/* temp */
body {
    background: #072237;
}

h3, p {
    color: #ffffff;
}

#loader {
    position: relative;
    width: 80px;
    height: 80px;
    cursor: pointer;
}

#ring.active {
    -webkit-animation: load 6s 1 forwards;
    -moz-animation: load 6s 1 forwards;
    -o-animation: load 6s 1 forwards;
    -ms-animation: load 6s 1 forwards;
    animation: load 6s 1 forwards;
}

#circle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    background: #FFFFFF;
    border-radius: 50%;
}

#circle.active {
    background: #FF1251;
    -webkit-animation: pulse 1.2s 3;
    -moz-animation: pulse 1.2s 3;
    -o-animation: pulse 1.2s 3;
    -ms-animation:  pulse 1.2s 3;
    animation: pulse 1.2s 3;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

/* Pulse */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    20% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
    20% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@-o-keyframes pulse {
    0% {
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    20% {
        -o-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@-ms-keyframes pulse {
    0% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    20% {
        -ms-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
    }
    20% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.8);
    }
}

/* Loading */

@-webkit-keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-moz-keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-o-keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-ms-keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

IE中的SVG路径进度CSS动画 - 简单JS夹具？还是用Raphael Lib？

0 个答案: