我使用svg.js制作了以下svg动画。最初,我使用CSS为dashoff设置动画,但是它在IE / Edge中不起作用,因此我改用JS。还是行不通。奇怪的是,如果我的笔划宽度很细,那么它就可以奏效。
const percent_complete = 75;
const progress = SVG.adopt(document.getElementById("progress-svg"));
const timer = 2500;
progress.each(function() {
this.attr({
stroke: "#cccccc",
"stroke-width": "6px"
});
if (this.hasClass("meter")) {
let len = this.length();
this.stroke({
dasharray: len + "px",
dashoffset: len + "px"
});
let to = len * ((100 - percent_complete) / 100);
this.stroke("#60cafe");
// if MS browser, just set attr
// if (browser.name === "edge" || browser.name === "ie") {
// this.attr({ "stroke-dashoffset": to + "px" });
// }
// animate svg
this.animate(timer).attr({
"stroke-dashoffset": to + "px"
});
}
});