IE11 'Symbol' is undefined progressbar.js (3,4288)
AlonKapi opened this issue · comments
Hello,
I'm trying to implement progressbar.js in my project and while it's working great in chrome, I have problems getting it to work in IE11.
I can see this exception thrown in the developer tools console: 'Symbol' is undefined at progressbar.js (3,4288).
I use the /dist/progressbar.js file from master branch.
My Html file:
< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < script src="progressbar.js"></script> < script src="scripts.js" defer></script> < link rel="stylesheet" type="text/css" href="styles.css"> < title>SVG Test</title> < /head> < body> < div class="path-container"> < svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300pt" height="424pt" viewBox="0 0 300 424" version="1.1"> < g id="surface1"> < path id="ranking-path-background" style="fill:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;" d="M 17.639947 18.709287 L 156.618781 18.173172 C 162.275485 18.361907 167.847433 20.506363 172.169931 24.157956 C 176.495163 27.809549 179.54087 32.943662 180.675492 38.488066 C 182.132728 45.616195 180.339206 53.346084 175.890943 59.106575 C 171.445414 64.867066 164.421697 68.559688 157.154651 68.956303 C 120.09217 68.77851 83.032424 68.600717 45.969943 68.420189 C 39.840253 68.261543 33.680488 70.55644 29.152938 74.692177 C 24.622654 78.825178 21.776531 84.752521 21.382831 90.871333 C 20.961791 97.375819 23.318523 104.000657 27.695701 108.833889 C 32.070146 113.664386 38.393952 116.659513 44.900938 117.064334 C 45.969943 117.129981 47.041682 117.129981 48.107953 117.064334 L 158.223656 116.52822 C 163.292543 117.21751 168.126304 119.534288 171.83638 123.054588 C 175.54919 126.574888 178.116442 131.282298 179.070617 136.307 C 180.292728 142.754045 178.799949 149.671557 175.021522 155.038168 C 171.24583 160.404779 165.239171 164.146637 158.756791 165.172365 L 44.900938 164.638986 C 39.482095 165.038337 34.216358 167.294939 30.189135 170.938327 C 26.159178 174.584449 23.389608 179.59821 22.451836 184.951145 C 21.248864 191.794805 23.113471 199.122609 27.444171 204.557602 C 31.772137 209.99533 38.495111 213.452719 45.436808 213.81651 L 159.82853 213.280396 " transform="matrix(1.428753,0,0,1.428101,0,0)"></path> < path id="ranking-path-progress" style="fill: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; stroke-miterlimit: 4; stroke-dasharray: 889.487, 889.487; stroke-dashoffset: 321.59;" d="M 17.639947 18.709287 L 156.618781 18.173172 C 162.275485 18.361907 167.847433 20.506363 172.169931 24.157956 C 176.495163 27.809549 179.54087 32.943662 180.675492 38.488066 C 182.132728 45.616195 180.339206 53.346084 175.890943 59.106575 C 171.445414 64.867066 164.421697 68.559688 157.154651 68.956303 C 120.09217 68.77851 83.032424 68.600717 45.969943 68.420189 C 39.840253 68.261543 33.680488 70.55644 29.152938 74.692177 C 24.622654 78.825178 21.776531 84.752521 21.382831 90.871333 C 20.961791 97.375819 23.318523 104.000657 27.695701 108.833889 C 32.070146 113.664386 38.393952 116.659513 44.900938 117.064334 C 45.969943 117.129981 47.041682 117.129981 48.107953 117.064334 L 158.223656 116.52822 C 163.292543 117.21751 168.126304 119.534288 171.83638 123.054588 C 175.54919 126.574888 178.116442 131.282298 179.070617 136.307 C 180.292728 142.754045 178.799949 149.671557 175.021522 155.038168 C 171.24583 160.404779 165.239171 164.146637 158.756791 165.172365 L 44.900938 164.638986 C 39.482095 165.038337 34.216358 167.294939 30.189135 170.938327 C 26.159178 174.584449 23.389608 179.59821 22.451836 184.951145 C 21.248864 191.794805 23.113471 199.122609 27.444171 204.557602 C 31.772137 209.99533 38.495111 213.452719 45.436808 213.81651 L 159.82853 213.280396 " transform="matrix(1.428753,0,0,1.428101,0,0)"></path></g> < /svg> < /div> < /body> < /html>
My scripts file:
function doRankingPathAnimation() { var svgPath = document.getElementById('ranking-path-progress'); var path = new ProgressBar.Path(svgPath, { duration: 3000, from: { color: '#f4f4f4' }, to: { color: '#002772' }, }); path.animate(1); } doRankingPathAnimation();
My CSS file:
.path-container { height: 560px; width: 300px; } .path-container > svg { position: relative; right: 14%; height: 100%; display: block; } #ranking-path-background { stroke-width: 6px; stroke: #f4f4f4; } #ranking-path-progress { stroke-width: 3px; stroke: #002772; }
Thanks!
This issue does not exist in previous version 1.0.1. So I used this version:
https://github.com/kimmobrunfeldt/progressbar.js/tree/a007db85f12cd8123800e03a97e75e4389cf55b5/dist